/**
 * SCHICHT 1 — PRIMITIVES
 *
 * Rohe Skalen. Sie ändern sich NIE, auch nicht per Media Query. Breakpoints
 * wechseln in semantic.css nur, WORAUF eine Rolle zeigt.
 * Komponenten lesen diese Werte nicht direkt, sondern über semantic/theme.
 * Ausnahme: --space-* und --radius-* in Layout-Regeln, solange es dafür
 * keine semantische Rolle gibt.
 *
 * Konvention: --{kategorie}-{skala}, einfacher Bindestrich, kein camelCase.
 * Einheiten in rem, Pixelwert als Kommentar (bei 16px Root).
 * Markenfarben stehen NICHT hier, sondern in brand.css.
 */
@layer tokens.primitives {
  :root {
    /* ── Neutrale Farben ─────────────────────────────────────────────── */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Zwei Skalen, weil Dunkel und Hell keine Spiegelung voneinander sind.
       Welche gilt, entscheidet allein semantic.css. Stufe = Helligkeit
       (Dunkel: 0 fast schwarz bis 1000 weiß; Hell: 0 weiß bis 1000 schwarz). */
    --color-neutral-dark-0: #070707;
    --color-neutral-dark-50: #111111;
    --color-neutral-dark-100: #161616;
    --color-neutral-dark-150: #1c1c1c;
    --color-neutral-dark-200: #222222;
    --color-neutral-dark-250: #292929;
    --color-neutral-dark-300: #333333;
    --color-neutral-dark-400: #4e4e4e;
    --color-neutral-dark-500: #707070;
    --color-neutral-dark-600: #949494;
    --color-neutral-dark-700: #b9b9b9;
    --color-neutral-dark-800: #d9d9d9;
    --color-neutral-dark-900: #f3f3f3;
    --color-neutral-dark-1000: #ffffff;

    --color-neutral-light-0: #ffffff;
    --color-neutral-light-50: #fcfcfc;
    --color-neutral-light-100: #f6f6f6;
    --color-neutral-light-150: #f2f2f2;
    --color-neutral-light-200: #dfdfdf;
    --color-neutral-light-250: #cdcdcd;
    --color-neutral-light-300: #bbbbbb;
    --color-neutral-light-400: #959595;
    --color-neutral-light-600: #4f4f4f;
    --color-neutral-light-700: #333333;
    --color-neutral-light-800: #1e1e1e;
    --color-neutral-light-900: #0f0f0f;
    --color-neutral-light-1000: #000000;

    /* Signalfarben: -700 trägt Text auf hellem Grund, -400 auf dunklem Grund */
    --color-red-400: #f87171;
    --color-red-700: #b42318;
    --color-green-400: #4ade80;
    --color-green-700: #2e6b3a;
    --color-orange-400: #fb923c;
    --color-orange-700: #8a5a00;
    --color-blue-400: #7fa0e6;
    --color-blue-700: #1f4e79;
    --color-purple-700: #6b3fa0;
    --color-teal-700: #0f6b6b;
    --color-magenta-700: #9d2b64;

    /* Fortschrittsstufen (AP-39): Orange · Amber · Lindgrün · Grün · kräftiges Grün.
       Zwei Skalen, weil Hell dunklere Töne braucht (≥ 3 : 1 gegen Spur und Karte). */
    --color-progress-light-0: #c2410c;
    --color-progress-light-1: #a16207;
    --color-progress-light-2: #4d7c0f;
    --color-progress-light-3: #2e7d32;
    --color-progress-light-4: #0b5d2a;
    --color-progress-dark-0: #fb923c;
    --color-progress-dark-1: #fbbf24;
    --color-progress-dark-2: #a3e635;
    --color-progress-dark-3: #4ade80;
    --color-progress-dark-4: #22c55e;

    /* ── Schrift ─────────────────────────────────────────────────────── */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-3xs: 0.75rem;    /* 12 */
    --font-size-2xs: 0.8125rem;  /* 13 */
    --font-size-xs: 0.875rem;    /* 14 */
    --font-size-2sm: 0.9375rem;  /* 15 */
    --font-size-sm: 1rem;        /* 16 */
    --font-size-md: 1.125rem;    /* 18 */
    --font-size-lg: 1.25rem;     /* 20 */
    --font-size-xl: 1.5rem;      /* 24 */
    --font-size-2xl: 1.75rem;    /* 28 */
    --font-size-3xl: 2rem;       /* 32 */
    --font-size-4xl: 2.25rem;    /* 36 */
    --font-size-5xl: 2.5rem;     /* 40 */
    --font-size-6xl: 3rem;       /* 48 */
    --font-size-7xl: 3.5rem;     /* 56 */
    --font-size-8xl: 4rem;       /* 64 */
    --font-size-9xl: 4.5rem;     /* 72 */
    --font-size-10xl: 5rem;      /* 80 */

    --line-height-tight: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.08em;

    /* ── Abstand: n = px ÷ 4, streng ─────────────────────────────────── */
    --space-0: 0;
    --space-1: 0.25rem;    /*   4 */
    --space-2: 0.5rem;     /*   8 */
    --space-3: 0.75rem;    /*  12 */
    --space-4: 1rem;       /*  16 */
    --space-5: 1.25rem;    /*  20 */
    --space-6: 1.5rem;     /*  24 */
    --space-8: 2rem;       /*  32 */
    --space-10: 2.5rem;    /*  40 */
    --space-12: 3rem;      /*  48 */
    --space-16: 4rem;      /*  64 */
    --space-20: 5rem;      /*  80 */
    --space-24: 6rem;      /*  96 */
    --space-32: 8rem;      /* 128 */
    --space-40: 10rem;     /* 160 */

    /* ── Form ────────────────────────────────────────────────────────── */
    --radius-xs: 0.125rem;     /*  2 */
    --radius-sm: 0.25rem;      /*  4 */
    --radius-md: 0.375rem;     /*  6 */
    --radius-lg: 0.5rem;       /*  8 */
    --radius-xl: 0.75rem;      /* 12 */
    --radius-full: 999rem;     /* Pille */

    --border-width-thin: 0.0625rem;    /* 1 */
    --border-width-medium: 0.125rem;   /* 2 */
    --border-width-thick: 0.1875rem;   /* 3 */

    --shadow-overlay: 0 1rem 2.5rem -1rem rgb(0 0 0 / 0.45);   /* nur schwebende Menüs */
    --shadow-lift: 0 0.5rem 1rem -0.5rem rgb(0 0 0 / 0.4);     /* nur die gezogene Karte */

    /* ── Bewegung ────────────────────────────────────────────────────── */
    --duration-instant: 120ms;   /* Drücken */
    --duration-fast: 160ms;      /* Übergänge der Oberfläche, Loslassen */
    --duration-base: 180ms;      /* Menüs */
    --duration-slow: 200ms;      /* Meldungen; nichts über 300 ms */

    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);

    /* ── Ebenen ──────────────────────────────────────────────────────── */
    --z-base: 1;
    --z-raised: 10;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-skip: 1000;
  }
}