/* =====================================================================
   PATRICK NOLL — CORPORATE DESIGN · DESIGN TOKENS
   Single Source of Truth. Dunkel = Standard (:root),
   Hell via [data-theme="light"] auf <html> oder einem Container.
   ===================================================================== */

:root {
  /* ---- Marke / Akzent (modusunabhängig als Rohwert) ---- */
  --brand-amber:            #EB7F24;   /* Marken-Akzent, für Flächen/Buttons */
  --brand-amber-ink:        #B85C0C;   /* dunkleres Amber für Text/Links auf Hell */
  --brand-on-accent:        #14100B;   /* Textfarbe AUF Amber-Flächen */

  /* ---- Typografie ---- */
  --font-heading: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;

  /* Schriftgrößen (Basis 16px, modulare Skala ~1.25) */
  --text-display: 3.75rem;   /* 60px — Hero */
  --text-h1:      2.75rem;   /* 44px */
  --text-h2:      2rem;      /* 32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-h4:      1.1875rem; /* 19px */
  --text-body-lg: 1.125rem;  /* 18px — Lead/Intro */
  --text-body:    1rem;      /* 16px — Standard-Fließtext */
  --text-sm:      0.875rem;  /* 14px */
  --text-caption: 0.78125rem;/* 12.5px */

  /* Schriftschnitte */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Zeilenhöhen */
  --leading-tight:  1.1;   /* Überschriften */
  --leading-snug:   1.3;
  --leading-normal: 1.6;   /* Fließtext */

  /* Laufweite */
  --tracking-tight:   -0.03em; /* große Headlines */
  --tracking-heading: -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;  /* Overline/Eyebrow uppercase */

  /* ---- Abstände (4px-Raster) ---- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---- Radien / Form ---- */
  --radius-sm:   3px;
  --radius-md:   5px;    /* Standard: Buttons, Karten, Inputs, Bilder */
  --radius-lg:   8px;
  --radius-pill: 999px;
  --clip-signature: 12px; /* NUR Primary-CTA: abgeschrägte Ecke unten rechts */

  /* ---- Layout ---- */
  --container-max: 1120px;
  --measure:       68ch;  /* max. Textbreite für Lesbarkeit */

  /* ---- Übergänge ---- */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}

/* =====================================================================
   DUNKEL-MODUS (Standard)
   ===================================================================== */
:root,
[data-theme="dark"] {
  --color-bg:            #1B1D22;
  --color-surface-1:     #22242A; /* Karten */
  --color-surface-2:     #2A2D33; /* raised / hover */
  --color-sunken:        #17181C; /* Code-Blöcke, Inputs */
  --color-border:        #2E313A;
  --color-border-subtle: #26282E;

  --color-text-primary:   #E6E8EC;
  --color-text-secondary: #9498A0;
  --color-text-muted:     #6B6F78;

  --color-accent:         #EB7F24;
  --color-accent-hover:   #F6913C;
  --color-accent-pressed: #CE6E14;
  --color-on-accent:      #14100B;
  --color-link:           #EB7F24; /* auf dunkel direkt Amber (Kontrast ok) */
  --color-link-hover:     #F6913C;

  --color-success: #43C08A;
  --color-warning: #F2C038; /* Gold-Gelb, bewusst ≠ Marken-Amber */
  --color-error:   #E5484D;
  --color-info:    #4C8DF6;

  /* dezente Tönungen für semantische Flächen (z. B. Alerts) */
  --color-success-bg: rgba(67,192,138,0.16);
  --color-warning-bg: rgba(242,192,56,0.16);
  --color-error-bg:   rgba(229,72,77,0.16);
  --color-info-bg:    rgba(76,141,246,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);

  color-scheme: dark;
}

/* =====================================================================
   HELL-MODUS
   ===================================================================== */
[data-theme="light"] {
  --color-bg:            #F5F6F7;
  --color-surface-1:     #FFFFFF; /* Karten */
  --color-surface-2:     #ECEEF1; /* raised / hover */
  --color-sunken:        #EAEBED; /* Code-Blöcke, Inputs */
  --color-border:        #DDE0E4;
  --color-border-subtle: #E7E9EC;

  --color-text-primary:   #1B1D22;
  --color-text-secondary: #4C5058;
  --color-text-muted:     #82868E;

  --color-accent:         #EB7F24; /* Flächen/Fills */
  --color-accent-hover:   #CE6E14;
  --color-accent-pressed: #A4520A;
  --color-on-accent:      #14100B;
  --color-link:           #B85C0C; /* Text/Links: dunkles Amber (Kontrast) */
  --color-link-hover:     #A4520A;

  --color-success: #158054;
  --color-warning: #8A6A0A;
  --color-error:   #C8282D;
  --color-info:    #1D5AC4;

  --color-success-bg: rgba(21,128,84,0.12);
  --color-warning-bg: rgba(160,110,10,0.12);
  --color-error-bg:   rgba(200,40,45,0.10);
  --color-info-bg:    rgba(29,90,196,0.10);

  --shadow-sm: 0 1px 2px rgba(16,20,30,0.06);
  --shadow-md: 0 4px 12px rgba(16,20,30,0.08);
  --shadow-lg: 0 12px 32px rgba(16,20,30,0.12);

  color-scheme: light;
}