/*
  List & Label Design System tokens.
  Source: Figma export "combitdesignsystem.css".
  Structure: primitives (theme-independent) -> semantic tokens, scoped per [data-theme].
  Do not hand-author new hex values here — add a primitive if one is missing upstream.
*/

:root {
  /* ---- primitives: non-color ---- */
  --border-radius-2xl: 1rem;
  --border-radius-3xl: 1.5rem;
  --border-radius-4xl: 2rem;
  --border-radius-full: 624.9375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-md: 0.375rem;
  --border-radius-none: 0rem;
  --border-radius-sm: 0.25rem;
  --border-radius-xl: 0.75rem;
  --border-radius-xs: 0.125rem;

  --container-0: 0rem;
  --container-2xl: 42rem;
  --container-2xs: 18rem;
  --container-3xl: 48rem;
  --container-3xs: 16rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --container-lg: 32rem;
  --container-md: 28rem;
  --container-sm: 24rem;
  --container-xl: 36rem;
  --container-xs: 20rem;

  --opacity-0: 0;
  --opacity-10: 10;
  --opacity-100: 100;
  --opacity-15: 15;
  --opacity-20: 20;
  --opacity-25: 25;
  --opacity-30: 30;
  --opacity-35: 35;
  --opacity-40: 40;
  --opacity-45: 45;
  --opacity-5: 5;
  --opacity-50: 50;
  --opacity-55: 55;
  --opacity-60: 60;
  --opacity-65: 65;
  --opacity-70: 70;
  --opacity-75: 75;
  --opacity-80: 80;
  --opacity-85: 85;
  --opacity-90: 90;
  --opacity-95: 95;

  --screens-2xl: 1536px;
  --screens-lg: 1024px;
  --screens-md: 768px;
  --screens-sm: 640px;
  --screens-xl: 1280px;
  --skew-0: 0;
  --skew-1: 1;
  --skew-12: 12;
  --skew-2: 2;
  --skew-3: 3;
  --skew-6: 6;
  --spacing-0: 0rem;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-4: 1rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-5: 1.25rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-6: 1.5rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-7: 1.75rem;
  --spacing-72: 18rem;
  --spacing-8: 2rem;
  --spacing-80: 20rem;
  --spacing-9: 2.25rem;
  --spacing-96: 24rem;
  --spacing-px: 1px;

  /* general */
  --radius: var(--border-radius-md);
  --radius-lg: var(--border-radius-xl);

  /* ---- primitives: color ramps ---- */
  --colors-white: #ffffff;
  --colors-black: #000000;
  --colors-transparent: rgba(255, 255, 255, 0);

  --colors-amber-50: #fffbeb;
  --colors-amber-100: #fef3c6;
  --colors-amber-200: #fee685;
  --colors-amber-300: #ffd230;
  --colors-amber-400: #ffba00;
  --colors-amber-500: #fd9a00;
  --colors-amber-600: #e17100;
  --colors-amber-700: #bb4d00;
  --colors-amber-800: #973c00;
  --colors-amber-900: #7b3306;
  --colors-amber-950: #461901;

  --colors-red-50: #fef2f2;
  --colors-red-100: #ffe2e2;
  --colors-red-200: #ffc9c9;
  --colors-red-300: #ffa2a2;
  --colors-red-400: #ff6467;
  --colors-red-500: #fb2c36;
  --colors-red-600: #e7000b;
  --colors-red-700: #c10007;
  --colors-red-800: #9f0712;
  --colors-red-900: #82181a;
  --colors-red-950: #460809;

  --colors-fuchsia-50: #fdf4ff;
  --colors-fuchsia-100: #fae8ff;
  --colors-fuchsia-200: #f6cfff;
  --colors-fuchsia-300: #f4a8ff;
  --colors-fuchsia-400: #ed6bff;
  --colors-fuchsia-500: #e12afb;
  --colors-fuchsia-600: #c800de;
  --colors-fuchsia-700: #a800b7;
  --colors-fuchsia-800: #8a0194;
  --colors-fuchsia-900: #721378;
  --colors-fuchsia-950: #4b004f;

  --colors-gray-50: #f9fafb;
  --colors-gray-100: #f4f4f6;
  --colors-gray-200: #e7e7ea;
  --colors-gray-300: #d3d5d9;
  --colors-gray-400: #9ea1a9;
  --colors-gray-500: #6f737b;
  --colors-gray-600: #50545d;
  --colors-gray-700: #3e424c;
  --colors-gray-800: #252832;
  --colors-gray-850: #1d1f29;
  --colors-gray-900: #14171f;
  --colors-gray-950: #14000e;

  --colors-neutral-50: #fcfcfc;
  --colors-neutral-100: #f5f5f5;
  --colors-neutral-150: #f2f2f2;
  --colors-neutral-200: #e5e5e5;
  --colors-neutral-250: #e1e2e3;
  --colors-neutral-300: #d4d4d4;
  --colors-neutral-400: #a1a1a1;
  --colors-neutral-500: #737373;
  --colors-neutral-600: #525252;
  --colors-neutral-700: #404040;
  --colors-neutral-800: #262626;
  --colors-neutral-900: #171717;
  --colors-neutral-950: #0a0a0a;

  --colors-zinc-50: #fafafa;
  --colors-zinc-100: #f4f4f5;
  --colors-zinc-200: #e4e4e7;
  --colors-zinc-300: #d4d4d8;
  --colors-zinc-400: #9f9fa9;
  --colors-zinc-500: #71717b;
  --colors-zinc-600: #52525c;
  --colors-zinc-700: #3f3f46;
  --colors-zinc-800: #27272a;
  --colors-zinc-900: #18181b;
  --colors-zinc-950: #09090b;

  --colors-slate-50: #f8fafc;
  --colors-slate-100: #f1f5f8;
  --colors-slate-150: #ebf0f5;
  --colors-slate-200: #e1e9ef;
  --colors-slate-300: #c9d9e3;
  --colors-slate-400: #8aa8bd;
  --colors-slate-500: #5a7a91;
  --colors-slate-600: #385c75;
  --colors-slate-700: #234b66;
  --colors-slate-800: #0c314b;
  --colors-slate-850: #052a43;
  --colors-slate-900: #002036;
  --colors-slate-950: #0b1f2d;

  --colors-deep-slate-50: #f7fafc;
  --colors-deep-slate-100: #f1f5f9;
  --colors-deep-slate-200: #e2e8f0;
  --colors-deep-slate-300: #cbd5e1;
  --colors-deep-slate-400: #94a3b8;
  --colors-deep-slate-500: #64748b;
  --colors-deep-slate-600: #475569;
  --colors-deep-slate-700: #334155;
  --colors-deep-slate-750: #273449;
  --colors-deep-slate-800: #1e293b;
  --colors-deep-slate-850: #162131;
  --colors-deep-slate-900: #101d2c;
  --colors-deep-slate-950: #070f18;

  --colors-ll-blue-50: #ebfaff;
  --colors-ll-blue-100: #bfefff;
  --colors-ll-blue-200: #80e1ff;
  --colors-ll-blue-300: #40d3ff;
  --colors-ll-blue-400: #00bfff;
  --colors-ll-blue-500: #00a8e0;
  --colors-ll-blue-600: #0099cc;
  --colors-ll-blue-700: #006ea7;
  --colors-ll-blue-800: #005b94;
  --colors-ll-blue-900: #004880;
  --colors-ll-blue-950: #03233f;

  --colors-ll-green-50: #f7fee7;
  --colors-ll-green-100: #ecfbc6;
  --colors-ll-green-200: #d9f59d;
  --colors-ll-green-300: #bff064;
  --colors-ll-green-350: #b2eb48;
  --colors-ll-green-400: #a6e62e;
  --colors-ll-green-500: #8fd61a;
  --colors-ll-green-600: #9ac11c;
  --colors-ll-green-700: #7fa316;
  --colors-ll-green-800: #5f7f0f;
  --colors-ll-green-900: #3f5a08;
  --colors-ll-green-950: #243a04;

  --colors-ll-rose-50: #fff1f2;
  --colors-ll-rose-100: #fff4f7;
  --colors-ll-rose-200: #ffd8e1;
  --colors-ll-rose-300: #ffb4c3;
  --colors-ll-rose-400: #ff8fa0;
  --colors-ll-rose-500: #ff6f80;
  --colors-ll-rose-600: #ed6c75;
  --colors-ll-rose-700: #c75660;
  --colors-ll-rose-800: #9f414a;
  --colors-ll-rose-900: #762d36;
  --colors-ll-rose-950: #452023;

  --colors-ll-teal-50: #ecfdf5;
  --colors-ll-teal-100: #d0fff0;
  --colors-ll-teal-200: #9dffe1;
  --colors-ll-teal-300: #6affd1;
  --colors-ll-teal-350: #43f4ba;
  --colors-ll-teal-400: #1ce9a4;
  --colors-ll-teal-500: #15dd9c;
  --colors-ll-teal-600: #25c191;
  --colors-ll-teal-700: #1b9d80;
  --colors-ll-teal-800: #12786a;
  --colors-ll-teal-850: #0e655c;
  --colors-ll-teal-900: #0a524e;
  --colors-ll-teal-950: #041a19;
}

/* ---------------------------------------------------------------- */
/* semantic tokens — light theme                                     */
/* ---------------------------------------------------------------- */
[data-theme="light"] {
  --colors-background: var(--colors-neutral-50);
  --colors-foreground: var(--colors-slate-950);
  --colors-headline: var(--colors-foreground);
  --colors-body: var(--colors-neutral-800);
  --colors-muted: var(--colors-zinc-600);

  --colors-card: var(--colors-slate-100);
  --colors-popover: var(--colors-card);
  --colors-surface: var(--colors-slate-200);
  --colors-table-1: var(--colors-background);
  --colors-table-2: var(--colors-card);

  --colors-border: var(--colors-foreground);
  --colors-border-subtle: var(--colors-slate-400);
  --colors-input: var(--colors-slate-200);
  --colors-button: var(--colors-zinc-50);
  --colors-disabled: var(--colors-zinc-400);

  --colors-blue-1: var(--colors-ll-blue-700);
  --colors-blue-2: var(--colors-ll-blue-600);
  --colors-green-1: var(--colors-ll-green-700);
  --colors-green-2: var(--colors-ll-green-600);
  --colors-rose-1: var(--colors-ll-rose-700);
  --colors-rose-2: var(--colors-ll-rose-600);
  --colors-teal-1: var(--colors-ll-teal-850);
  --colors-teal-2: var(--colors-ll-teal-700);

  --colors-link: var(--colors-blue-1);
  --colors-destructive: var(--colors-red-600);

  --colors-chart-1: var(--colors-rose-2);
  --colors-chart-2: var(--colors-teal-2);
  --colors-chart-3: var(--colors-blue-2);
  --colors-chart-4: var(--colors-fuchsia-700);
  --colors-chart-5: var(--colors-amber-600);

  /* chrome surfaces — dekorative Flächen ohne Primärinhalt (nav, code blocks,
     mockups, Hero-Bänder). Bewusst kein "surface-2/3": das ist eine eigene
     Achse (Zweck), keine Fortsetzung der surface-Elevation (card-in-card,
     zweite Spaltenfarbe etc.) */
  --colors-chrome-1: var(--colors-slate-150);
  --colors-chrome-2: var(--colors-slate-300);

  /* well surfaces — bewusst dunkel getönte, "zurückgesetzte" Sektionen
     (Zwischensektionen mit Zitaten, Footer). Eigene Achse, keine Fortsetzung
     von surface: surface geht heller/angehoben (Card-in-Card), well geht
     dunkler/abgesenkt. Absichtlich in BEIDEN Themes derselbe dunkle
     deep-slate-Ton (kein Light-Pendant) — Sektionen, die well nutzen,
     sollten selbst data-theme="dark" setzen, damit Text-/Rahmenfarben dazu
     passen (siehe Root-CLAUDE.md, "Vier Farbachsen"). */
  --colors-well-1: var(--colors-deep-slate-850);
  --colors-well-2: var(--colors-deep-slate-950);

  /* shadow tint — softer than pure black so drop-shadows don't look harsh on light backgrounds */
  --colors-shadow: var(--colors-slate-800);
}

/* ---------------------------------------------------------------- */
/* semantic tokens — dark theme                                      */
/* ---------------------------------------------------------------- */
[data-theme="dark"] {
  --colors-background: var(--colors-deep-slate-900);
  --colors-foreground: var(--colors-slate-50);
  --colors-headline: var(--colors-foreground);
  --colors-body: var(--colors-slate-150);
  --colors-muted: var(--colors-gray-300);

  --colors-card: var(--colors-deep-slate-800);
  --colors-popover: var(--colors-card);
  --colors-surface: var(--colors-deep-slate-750);
  --colors-table-1: var(--colors-background);
  --colors-table-2: var(--colors-card);

  --colors-border: var(--colors-foreground);
  --colors-border-subtle: var(--colors-gray-700);
  --colors-input: var(--colors-slate-950);
  --colors-button: var(--colors-gray-900);
  --colors-disabled: var(--colors-zinc-500);

  --colors-blue-1: var(--colors-ll-blue-400);
  --colors-blue-2: var(--colors-ll-blue-300);
  --colors-green-1: var(--colors-ll-green-400);
  --colors-green-2: var(--colors-ll-green-350);
  --colors-rose-1: var(--colors-ll-rose-400);
  --colors-rose-2: var(--colors-ll-rose-300);
  --colors-teal-1: var(--colors-ll-teal-400);
  --colors-teal-2: var(--colors-ll-teal-350);

  --colors-link: var(--colors-blue-1);
  --colors-destructive: var(--colors-red-500);

  --colors-chart-1: var(--colors-rose-1);
  --colors-chart-2: var(--colors-teal-1);
  --colors-chart-3: var(--colors-blue-1);
  --colors-chart-4: var(--colors-fuchsia-500);
  --colors-chart-5: var(--colors-amber-400);

  /* chrome surfaces — dekorative Flächen ohne Primärinhalt (nav, code blocks,
     mockups, Hero-Bänder). Eigener Zweck, keine Fortsetzung von surface. */
  --colors-chrome-1: var(--colors-slate-800);
  --colors-chrome-2: var(--colors-slate-900);

  /* well surfaces — dieselben Werte wie im Light-Block, siehe Kommentar dort:
     well ist bewusst theme-invariant dunkel, keine Fortsetzung von surface. */
  --colors-well-1: var(--colors-deep-slate-850);
  --colors-well-2: var(--colors-deep-slate-950);

  /* shadow tint — pure black reads fine against dark backgrounds */
  --colors-shadow: var(--colors-black);
}