/* InvoiceWerk — Design-Tokens (PROMPT §4/§5). Einzige Datei mit Farbwerten. */

:root {
  /* ---- Marke (Werkblau, hell) ---- */
  --primary: #2F4BC3;
  --primary-pressed: #1F34AC;
  --primary-on-surface: #2F4BC3;
  --primary-tint: #E4EDFF;
  --primary-outline: #C9CDE8;
  --on-primary: #FFFFFF;
  --brand-subdued: #A1AEE4;
  --primary-a10: rgb(47 75 195 / .10);   /* Diagramm-Fläche */
  --primary-a06: rgb(47 75 195 / .06);   /* Bento-Zeigerglanz */
  --focus-halo: rgb(47 75 195 / .12);

  /* ---- Flächen & Text (hell) ---- */
  --background: #F5F6F8;
  --surface: #FFFFFF;
  --surface-alt: #EEF0F4;
  --border: #E4E7EE;
  --border-card: #E7EAF2;
  --divider: #EEEFF3;
  --text-primary: #151A24;
  --text-secondary: #5C6474;
  --text-tertiary: #8C93A6;
  --text-label: #3A4257;
  --surface-veil: rgb(255 255 255 / .82); /* verdichteter Kopf über blur */

  /* ---- Status (hell) ---- */
  --success: #148055;      --success-tint: #E7F6EF;
  --error: #D63A47;        --error-tint: #FCEBEC;
  --warning: #A96B0A;      --warning-tint: #FBF3E2;
  --overdue: #C2402F;      --overdue-tint: #F9E3DF;

  /* ---- Bühne & Dekor (hell) ---- */
  --blob-fill: #E2E8F9;
  --stage-top: #DFE5F8;
  --stage-bottom: #EBEFFB;
  --dot-pattern: #B7C1EA;
  --decor-outline: #C9D2F0;
  --decor-accent: #A1AEE4;
  --chip-surface: #FFFFFF;
  --paper-shadow: #E4E8F4;

  /* ---- Papier-Regel (§4.2): Rechnungs-Artwork behält Hellmodus-Farben, auch dunkel ---- */
  --paper: #FFFFFF;
  --paper-border: #E7EAF2;
  --paper-divider: #EEEFF3;
  --paper-text: #151A24;
  --paper-text-2: #5C6474;
  --paper-text-3: #8C93A6;
  --paper-label: #3A4257;
  --paper-primary: #2F4BC3;
  --paper-tint: #E4EDFF;
  --paper-outline: #C9CDE8;
  --paper-success: #148055;
  --paper-success-tint: #E7F6EF;
  --paper-warning: #A96B0A;
  --paper-warning-tint: #FBF3E2;

  /* ---- Tiefe (§4.4) ---- */
  --shadow-card: 0 1px 2px rgb(16 24 40 / .04), 0 8px 24px rgb(16 24 40 / .05);
  --shadow-float: 0 12px 32px rgb(16 24 40 / .12);
  --shadow-chip: 0 6px 14px rgb(0 0 0 / .12);
  --glow-primary: 0 12px 22px -10px rgb(47 75 195 / .55); /* NUR der primäre CTA */

  /* ---- Schrift ---- */
  --font-sans: "Schibsted Grotesk", system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --track: -0.02em;         /* Überschriften */
  --track-money: -0.03em;   /* große Beträge */
  --track-kicker: 0.09em;   /* Kicker, Versalien */
  --track-flow: -0.01em;    /* große Flow-Headlines */
  --fs-hero: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-body: clamp(1rem, .97rem + .2vw, 1.125rem);
  --fs-kicker: .75rem;

  /* ---- Raster & Radien (§4.4) ---- */
  --sp-2: 2px;  --sp-4: 4px;  --sp-8: 8px;  --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-48: 48px;
  --sp-52: 52px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px;
  --r-sm: 10px; --r-cell: 12px; --r-md: 14px; --r-btn: 15px;
  --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --stroke: 1.5px;

  /* ---- Bewegung (§5, echte App-Konstanten) ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.35, .62, 1); /* Näherung der App-Feder (Dämpfung .75/380) */
  --dur: 260ms;        /* Standard-Übergang */
  --dur-fast: 150ms;   /* Farbe, Rand, Fokus */
  --dur-press: 100ms;  /* Button-Druck */
  --dur-hint: 200ms;   /* Hinweiszeilen */
  --dur-check: 300ms;  /* Häkchen-Trim */
  --dur-line: 700ms;   /* Diagramm-Linie */
  --dur-entrance: 300ms;
  --stagger: 60ms;
  --rise: 16px;        /* AppEntrance-Aufstieg */
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }
html[data-theme="system"] { color-scheme: light dark; }

/* ---- Dunkel: erzwungen ---- */
html[data-theme="dark"] {
  --primary: #5577E5;
  --primary-pressed: #668AF9;
  --primary-on-surface: #90ABF4;
  --primary-tint: #182241;
  --primary-outline: #3C4260;
  --brand-subdued: #82A1F6;
  --primary-a10: rgb(85 119 229 / .10);
  --primary-a06: rgb(85 119 229 / .06);
  --focus-halo: rgb(85 119 229 / .16);

  --background: #0C0F14;
  --surface: #161B24;
  --surface-alt: #232B38;
  --border: #2A3140;
  --border-card: #2A3143;
  --divider: #232A36;
  --text-primary: #F0F3F8;
  --text-secondary: #99A2B4;
  --text-tertiary: #626B7E;
  --text-label: #C4CADE;
  --surface-veil: rgb(22 27 36 / .78);

  --success: #3DCF95;  --success-tint: #12291F;
  --error: #F97078;    --error-tint: #33191C;
  --warning: #E5B356;  --warning-tint: #2E2412;
  --overdue: #E8735C;  --overdue-tint: #34201A;

  --blob-fill: #1E2740;
  --stage-top: #1B2134;
  --stage-bottom: #161B2A;
  --dot-pattern: #33406B;
  --decor-outline: #333E5E;
  --decor-accent: #3B4870;
  --chip-surface: #1F2536;
  --paper-shadow: #222941;

  --glow-primary: 0 12px 22px -10px rgb(47 75 195 / .45);
}

/* ---- Dunkel: Systempräferenz (data-theme="system") ---- */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --primary: #5577E5;
    --primary-pressed: #668AF9;
    --primary-on-surface: #90ABF4;
    --primary-tint: #182241;
    --primary-outline: #3C4260;
    --brand-subdued: #82A1F6;
    --primary-a10: rgb(85 119 229 / .10);
    --primary-a06: rgb(85 119 229 / .06);
    --focus-halo: rgb(85 119 229 / .16);

    --background: #0C0F14;
    --surface: #161B24;
    --surface-alt: #232B38;
    --border: #2A3140;
    --border-card: #2A3143;
    --divider: #232A36;
    --text-primary: #F0F3F8;
    --text-secondary: #99A2B4;
    --text-tertiary: #626B7E;
    --text-label: #C4CADE;
    --surface-veil: rgb(22 27 36 / .78);

    --success: #3DCF95;  --success-tint: #12291F;
    --error: #F97078;    --error-tint: #33191C;
    --warning: #E5B356;  --warning-tint: #2E2412;
    --overdue: #E8735C;  --overdue-tint: #34201A;

    --blob-fill: #1E2740;
    --stage-top: #1B2134;
    --stage-bottom: #161B2A;
    --dot-pattern: #33406B;
    --decor-outline: #333E5E;
    --decor-accent: #3B4870;
    --chip-surface: #1F2536;
    --paper-shadow: #222941;

    --glow-primary: 0 12px 22px -10px rgb(47 75 195 / .45);
  }
}

/* ---- Reduce Motion: jede Bewegung kollabiert auf die 150-ms-Blende (§5) ----
   Alle Animationen/Übergänge referenzieren diese Variablen; kein !important nötig. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 150ms; --dur-fast: 150ms; --dur-press: 150ms; --dur-hint: 150ms;
    --dur-check: 150ms; --dur-line: 150ms; --dur-entrance: 150ms;
    --stagger: 0ms; --rise: 0px;
    --ease-spring: cubic-bezier(.4, 0, .2, 1);
  }
}