/* GCBoK Design Tokens — abgeleitet von coverflex.de Designsprache */
/* Palette: Warmes Papier-Weiß, Tief-Marineblau, Akzent Orange */

:root,
[data-theme='light'] {
  /* === FARBEN === */
  /* Surfaces */
  --c-paper:    #FBFAF7;   /* Hintergrund warm off-white */
  --c-surface:  #FFFFFF;
  --c-surface-alt: #F8FAFC;
  --c-line:     #E5E7EB;

  /* Text */
  --c-ink:      #0F1B33;   /* Primärtext tief navy */
  --c-body:     #334155;   /* Body-Text slate */
  --c-muted:    #64748B;   /* Gedämpft */
  --c-faint:    #94A3B8;   /* Sehr gedämpft */
  --c-inverse:  #FFFFFF;

  /* Akzent-Farben (identisch coverflex.de) */
  --c-amber:      #E8632A;   /* Orange Primärakzent */
  --c-amber-deep: #C2410C;   /* Hover */
  --c-amber-soft: #FED7AA;   /* Soft fill / highlight */
  --c-green:      #10A987;
  --c-blue:       #2563EB;
  --c-coverage:   #6B7280;

  /* === TYPOGRAFIE === */
  --ff-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --ff-display: 'Cabinet Grotesk', 'Inter', sans-serif;

  /* Type Scale (fluid clamp) */
  --fs-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --fs-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --fs-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --fs-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* === SPACING (4px base) === */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* === LAYOUT === */
  --maxw:       1120px;
  --maxw-prose: 720px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --t-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-smooth: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === SHADOWS === */
  --shadow-sm: 0 1px 3px rgba(15,27,51,0.06);
  --shadow-md: 0 4px 16px rgba(15,27,51,0.08);
  --shadow-lg: 0 12px 40px rgba(15,27,51,0.12);
}

/* DARK MODE */
[data-theme='dark'] {
  --c-paper:    #0F1117;
  --c-surface:  #161B27;
  --c-surface-alt: #1C2333;
  --c-line:     #2D3748;

  --c-ink:      #F1F5F9;
  --c-body:     #CBD5E1;
  --c-muted:    #94A3B8;
  --c-faint:    #64748B;
  --c-inverse:  #0F1B33;

  --c-amber:      #FB923C;
  --c-amber-deep: #FDBA74;
  --c-amber-soft: #431407;
  --c-green:      #34D399;
  --c-blue:       #60A5FA;
  --c-coverage:   #94A3B8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-paper:    #0F1117;
    --c-surface:  #161B27;
    --c-surface-alt: #1C2333;
    --c-line:     #2D3748;
    --c-ink:      #F1F5F9;
    --c-body:     #CBD5E1;
    --c-muted:    #94A3B8;
    --c-faint:    #64748B;
    --c-inverse:  #0F1B33;
    --c-amber:      #FB923C;
    --c-amber-deep: #FDBA74;
    --c-amber-soft: #431407;
    --c-green:      #34D399;
    --c-blue:       #60A5FA;
    --c-coverage:   #94A3B8;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.50);
  }
}