/*
 * Farbpalette und Schrift des Gear-Dock-Designs.
 * Änderungen an Farben nur hier vornehmen.
 */
:root {
    color-scheme: dark;

    /* Flächen */
    --top: #18161c;      /* Header und Hero */
    --bottom: #111015;   /* Abschnitt Custom 3D Prints, Seitenende */

    /* Text */
    --white: #f7f7f8;

    /* Akzente */
    --lime: #c6ff4b;     /* Button "Mehr Sehen" */
    --purple: #a981ff;   /* Button "Modell Hochladen" */
    --blue: #59b9f3;     /* Button "Kontakt" */
}

/* Customs-Seite */
:root {
    --deep: #0a090c;      /* Hintergrund unter dem Hero */
    --card: #211e26;      /* Karten */
    --card-line: #6a6375; /* Karten- und Feldrahmen */
    --field: #2b2731;     /* Eingabefelder */
    --divider: #35313c;   /* Trennlinien */
    --muted: #9899a6;     /* Nebentext */
    --orange: #f6ae2d;
    --red: #fb3640;
}

/* UI-Elemente (Figma-Seite "UI-Elemente") */
:root {
    --font-sans: Roboto, Arial, Helvetica, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ink: #0f0d12;            /* Schrift auf hellen Flächen (Limette, Blau, Lila) */
    --text-secondary: #b9b7bf; /* Fließtext auf dunklen Karten */
    --card-strong: #37323e;    /* Tabellenkopf, Toggles, Hover-Flächen */
    --hover: #433d4a;
    --line: #514a59;           /* Kartenrahmen */

    --lime-hover: #a8e63f;
    --lime-dark: #35451f;
    --blue-hover: #3e95d9;
    --blue-dark: #203b50;
    --purple-dark: #3a2b6e;
    --red-hover: #d52d35;
    --red-dark: #51242a;
    --orange-dark: #49391e;
    --gold: #f8d24b;

    --radius-input: 5px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-pill: 99px;
}