/* =============================================================
   SEOlyze Design Tokens v1.0
   -------------------------------------------------------------
   Light-First, Dark als Toggle via [data-theme="dark"]
   Area-Themes via .area-ai / .area-analyse / .area-rank / .area-future
   Keine @layer-Wrapper (Chromium Silent-Drop-Bug bei großen Files).
   ============================================================= */

/* ---------- Brand / CI Skalen ---------- */
:root {
  /* Violett — AI Creation Area */
  --violet-50:  #f4edfa;
  --violet-100: #e8d9f4;
  --violet-200: #d0b3e9;
  --violet-300: #b78ddd;
  --violet-400: #a074ce;
  --violet-500: #8f5fc4;   /* CI */
  --violet-600: #7849a8;
  --violet-700: #603a86;
  --violet-800: #4a2c68;
  --violet-900: #342049;

  /* Orange — Content Optimization / WDF+IDF Area (CI-Leitfarbe) */
  --orange-50:  #fff4e5;
  --orange-100: #ffe4bf;
  --orange-200: #ffcc80;
  --orange-300: #ffb340;
  --orange-400: #ffa11a;
  --orange-500: #ff9000;   /* CI */
  --orange-600: #e07b00;
  --orange-700: #b86200;
  --orange-800: #8f4c00;
  --orange-900: #663700;

  /* Grün — Rank Tracker Area */
  --green-50:  #f4faeb;
  --green-100: #e6f3c9;
  --green-200: #cde798;
  --green-300: #b3d965;
  --green-400: #a5cc3a;
  --green-500: #97bf0d;    /* CI */
  --green-600: #7da30a;
  --green-700: #617f08;
  --green-800: #4a6206;
  --green-900: #334405;

  /* Blau — Future / Topical Authority Area */
  --blue-50:  #e6f2f9;
  --blue-100: #c2dff0;
  --blue-200: #88bfde;
  --blue-300: #529dca;
  --blue-400: #2d86b5;
  --blue-500: #1a70a1;     /* CI */
  --blue-600: #145a84;
  --blue-700: #0f4565;
  --blue-800: #0a324a;
  --blue-900: #061f30;

  /* Neutrals — kühl-warme Mischung */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f4f6f8;
  --neutral-100: #eaedf2;
  --neutral-150: #dfe3ea;
  --neutral-200: #d1d6dc;
  --neutral-300: #b8bfc9;
  --neutral-400: #9aa1ad;
  --neutral-500: #6b7280;
  --neutral-600: #4a5163;
  --neutral-700: #363d4d;
  --neutral-800: #242b38;
  --neutral-850: #1a2028;
  --neutral-900: #0f1419;
  --neutral-950: #070b10;

  /* Semantic Colors */
  --success-50:  #f4faeb; --success-100: #e6f3c9;
  --success-500: #97bf0d; --success-600: #7da30a; --success-700: #617f08;

  --warning-50:  #fff4e5; --warning-100: #ffe4bf;
  --warning-500: #ff9000; --warning-600: #e07b00; --warning-700: #b86200;

  --danger-50: #fef2f2; --danger-100: #fee2e2;
  --danger-500: #dc2626; --danger-600: #b91c1c; --danger-700: #991b1b;

  --info-50: #e6f2f9; --info-100: #c2dff0;
  --info-500: #1a70a1; --info-600: #145a84; --info-700: #0f4565;

  /* ---------- Semantic Tokens (Light Default) ---------- */
  --bg-canvas:      var(--neutral-50);   /* v2: grauer Canvas -> weisse Karten schweben (suite-weit) */
  --bg-surface:     var(--neutral-0);
  --bg-surface-2:   var(--neutral-50);
  --bg-elevated:    var(--neutral-0);  /* DC24ae: für floating Cards/Modals (Versionen-Modal etc.) */
  --bg-subtle:      var(--neutral-50); /* DC24ae: subtle panels (fd-comments-filter etc.) */
  --bg-tertiary:    var(--neutral-100); /* DC24ae: pills/chips Hintergrund */
  --bg-sunken:      var(--neutral-50);
  --bg-hover:       color-mix(in oklab, var(--neutral-100) 70%, transparent);
  --bg-active:      color-mix(in oklab, var(--neutral-150) 80%, transparent);
  --bg-overlay:     rgba(15, 20, 25, 0.48);

  --bg-sidebar:        var(--neutral-900);
  --bg-sidebar-hover:  color-mix(in oklab, white 6%, var(--neutral-900));
  --bg-sidebar-active: color-mix(in oklab, white 10%, var(--neutral-900));

  --fg-primary:   #1a1f2e;
  --fg-secondary: var(--neutral-600);
  --fg-muted:     var(--neutral-500);
  --fg-faint:     var(--neutral-400);
  --fg-disabled:  var(--neutral-300);
  --fg-inverse:   var(--neutral-0);

  --fg-sidebar:         #e3e7ee;
  --fg-sidebar-muted:   #8b94a3;
  --fg-sidebar-heading: #5e6775;

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-150);
  --border-strong:  var(--neutral-200);
  --border-inverse: color-mix(in oklab, white 10%, transparent);

  --ring-color: color-mix(in oklab, var(--area-primary, var(--orange-500)) 35%, transparent);
  --ring:       0 0 0 3px var(--ring-color);

  /* Default Area = Orange/Analyse */
  --area-primary:        var(--orange-500);
  --area-primary-hover:  var(--orange-600);
  --area-primary-active: var(--orange-700);
  --area-primary-soft:   var(--orange-50);
  --area-primary-soft-2: var(--orange-100);
  --area-primary-ring:   color-mix(in oklab, var(--orange-500) 35%, transparent);
  --area-primary-fg:     var(--orange-700);
  --area-primary-fg-on:  #ffffff;
  --area-primary-gradient: linear-gradient(135deg, var(--orange-400), var(--orange-600));
}

/* ---------- Area-Themes ---------- */
.area-ai {
  --area-primary:        var(--violet-500);
  --area-primary-hover:  var(--violet-600);
  --area-primary-active: var(--violet-700);
  --area-primary-soft:   var(--violet-50);
  --area-primary-soft-2: var(--violet-100);
  --area-primary-ring:   color-mix(in oklab, var(--violet-500) 35%, transparent);
  --area-primary-fg:     var(--violet-700);
  --area-primary-fg-on:  #ffffff;
  --area-primary-gradient: linear-gradient(135deg, var(--violet-400), var(--violet-600));
}
.area-analyse {
  --area-primary:        var(--orange-500);
  --area-primary-hover:  var(--orange-600);
  --area-primary-active: var(--orange-700);
  --area-primary-soft:   var(--orange-50);
  --area-primary-soft-2: var(--orange-100);
  --area-primary-ring:   color-mix(in oklab, var(--orange-500) 35%, transparent);
  --area-primary-fg:     var(--orange-700);
  --area-primary-fg-on:  #ffffff;
  --area-primary-gradient: linear-gradient(135deg, var(--orange-400), var(--orange-600));
}
.area-rank {
  --area-primary:        var(--green-500);
  --area-primary-hover:  var(--green-600);
  --area-primary-active: var(--green-700);
  --area-primary-soft:   var(--green-50);
  --area-primary-soft-2: var(--green-100);
  --area-primary-ring:   color-mix(in oklab, var(--green-500) 35%, transparent);
  --area-primary-fg:     var(--green-700);
  --area-primary-fg-on:  #ffffff;
  --area-primary-gradient: linear-gradient(135deg, var(--green-400), var(--green-600));
}
.area-future {
  --area-primary:        var(--blue-500);
  --area-primary-hover:  var(--blue-600);
  --area-primary-active: var(--blue-700);
  --area-primary-soft:   var(--blue-50);
  --area-primary-soft-2: var(--blue-100);
  --area-primary-ring:   color-mix(in oklab, var(--blue-500) 35%, transparent);
  --area-primary-fg:     var(--blue-700);
  --area-primary-fg-on:  #ffffff;
  --area-primary-gradient: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}

/* ---------- Spacing (8px Baseline) ---------- */
:root {
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
}

/* ---------- Radii ---------- */
:root {
  --r-none: 0;
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;
  --r-pill: 9999px;
}

/* ---------- Shadows ---------- */
:root {
  --shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 2px 4px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 20, 25, 0.06), 0 4px 12px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 20, 25, 0.08), 0 12px 32px rgba(15, 20, 25, 0.10);
  --shadow-xl: 0 8px 16px rgba(15, 20, 25, 0.10), 0 24px 64px rgba(15, 20, 25, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(15, 20, 25, 0.05);
  --shadow-focus: var(--ring);
}

/* ---------- Typography ---------- */
:root {
  --font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base: 14px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-display: 48px;

  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.12em;
}

/* ---------- Motion ---------- */
:root {
  --dur-instant: 80ms;
  --dur-fast:    120ms;
  --dur-base:    160ms;
  --dur-slow:    240ms;

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --t-quick: var(--dur-fast) var(--ease-out);
  --t-base:  var(--dur-base) var(--ease-out);
  --t-layout: var(--dur-slow) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}

/* ---------- Z-Index ---------- */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
  --z-tooltip:  700;
}

/* ---------- Layout ---------- */
:root {
  --sidebar-w:           248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            56px;
  --helper-w:            320px;
  --container-max:       1440px;
  --content-padding-x:   32px;
  --content-padding-y:   24px;
}