/* =========================================================================
   tokens.css — Das Design-System von Projekt Prototyp
   Eine Quelle der Wahrheit für Farbe, Raum, Typografie und Bewegung.
   Vorher: 6 Variablen und ~25 lose Hex-Werte quer über drei Stylesheets.
   ========================================================================= */

/* Die Kaskade als bewusster Entwurf statt als Ladereihenfolge.
   Diese Deklaration MUSS als erstes im ersten geladenen Stylesheet stehen —
   sie legt die Rangfolge fest, unabhaengig davon, wann eine Datei laedt. */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* --- Farbe: Tinte -------------------------------------------------- */
    --ink-900: #07080A;   /* tiefster Grund, Overlays */
    --ink-800: #0A0B0D;   /* Seitenhintergrund */
    --ink-700: #121417;   /* abgesetzte Flächen, Karten */
    --ink-600: #1B1E23;   /* Ränder von Flächen, Eingabefelder */

    /* --- Farbe: Gold = Ornament ---------------------------------------- */
    --gold-100: #FDF9EB;
    --gold-400: #E5D5A4;
    --gold-700: #8C7644;
    --gold-rgb: 229 213 164;   /* für rgb(var(--gold-rgb) / a) statt abgetippter rgba() */

    /* --- Farbe: Kupfer = Interaktion ------------------------------------ */
    /* Strikte Rollentrennung: Gold zeigt Schmuck, Kupfer zeigt "hier kannst
       du etwas tun". Vorher war alles gold — deshalb war nicht erkennbar,
       was klickbar ist. */
    --copper-400: #C98A4B;
    --copper-500: #B87333;
    --copper-600: #8F5822;
    --copper-rgb: 184 115 51;

    /* --- Farbe: Papier -------------------------------------------------- */
    --bone: #EFEAE0;      /* warmes Papierweiß statt kaltem #EFEFEF */
    --bone-dim: #A8A296;  /* Sekundärtext */
    --bone-faint: #6E6A63;/* Beschriftungen, Meta */

    /* --- Semantische Rollen --------------------------------------------- */
    --surface: var(--ink-800);
    --surface-raised: var(--ink-700);
    --surface-sunken: var(--ink-900);
    --text: var(--bone);
    --text-muted: var(--bone-dim);
    --text-faint: var(--bone-faint);
    --action: var(--copper-500);
    --action-hover: var(--copper-400);
    --ornament: var(--gold-400);

    /* Die Haarlinie ist das Grundelement der ganzen Bildsprache. */
    --hairline: rgb(var(--gold-rgb) / .18);
    --hairline-strong: rgb(var(--gold-rgb) / .38);
    --hairline-faint: rgb(var(--gold-rgb) / .08);

    --danger: #C1554B;
    --success: #7FA86B;

    /* --- Raum: 4px-Basis ------------------------------------------------ */
    --space-1: .25rem;   --space-2: .5rem;    --space-3: .75rem;
    --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
    --space-8: 3rem;     --space-10: 4rem;    --space-12: 6rem;
    --space-16: 9rem;

    /* --- Typografie: fluid, skaliert mit dem Viewport -------------------- */
    --font-display: 'Cinzel', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

    --step--1: clamp(.78rem, .76rem + .10vw, .84rem);
    --step-0:  clamp(1rem, .96rem + .18vw, 1.12rem);
    --step-1:  clamp(1.2rem, 1.13rem + .34vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.36rem + .68vw, 2rem);
    --step-3:  clamp(1.9rem, 1.63rem + 1.32vw, 2.9rem);
    --step-4:  clamp(2.4rem, 1.9rem + 2.4vw, 4.2rem);
    --step-5:  clamp(3rem, 2.1rem + 4.4vw, 6.4rem);

    --leading-tight: 1.15;
    --leading-body: 1.65;
    --tracking-display: .16em;  /* der Stichkatalog-Look */
    --tracking-wide: .28em;     /* Kapitälchen-Beschriftungen */

    /* --- Form ------------------------------------------------------------ */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --border-hair: 1px;
    --frame-offset: 6px;   /* Abstand des Doppelrahmens am Flash-Blatt */

    /* --- Bewegung -------------------------------------------------------- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 160ms;
    --dur-base: 320ms;
    --dur-slow: 700ms;
    --dur-draw: 1400ms;   /* eine Linie, die sich zeichnet */

    /* --- Ebenen: eine Skala statt verstreuter 1/10/100/9999/10000 -------- */
    --z-base: 0;
    --z-raised: 10;
    --z-header: 100;
    --z-overlay: 500;
    --z-modal: 1000;

    /* --- Maße ------------------------------------------------------------ */
    --measure: 68ch;         /* lesbare Zeilenlänge */
    --container: 76rem;
    --container-narrow: 44rem;
    --header-h: 4.5rem;
  }
}