/* ============================================================================
   Uncle Savvy — Tokens, beide Themes
   Gebaut nach Mercury/MERCURY-REFERENZ.md §2. Rollen und Skalen sind
   übernommen, die Handlungsfarbe ist eigen: Mercury ist Kobalt, wir sind
   Petrol. Ab hier steht kein Hexwert mehr in einem Bauteil.
   ========================================================================== */

:root {
  /* ---- Raster (Referenz §2.2) ------------------------------------------ */
  --grid-total-columns: 16;
  --grid-gutters: 32px;
  --grid-margins: 32px;
  --grid-max-width: 1952px;

  --navbar-height: 72px;
  --navbar-banner-height: 44px;
  --navbar-z-index: 99;
  --spacing-fadeIn: 50px;

  --layout-padding-sm: 40px;
  --layout-padding-md: 72px;
  --layout-padding-lg: 112px;
  --layout-padding-xl: 128px;

  --gap-xs: 12px;  --gap-sm: 24px;  --gap-md: 32px;
  --gap-lg: 32px;  --gap-xl: 40px;  --gap-2xl: 72px; --gap-3xl: 112px;
  --stack-gap-sm: 12px; --stack-gap-md: 24px; --stack-gap-lg: 40px;

  /* ---- Typo (Referenz §2.3) -------------------------------------------- */
  /* Zwei Rollen: --font-display trägt die großen Zeilen und die großen
     Zahlen, --font-sans alles andere. Beide werden variabel geladen, deshalb
     greifen die krummen Gewichte weiter unten (480, 420) tatsächlich —
     bei statisch geladenen Schnitten würden sie auf 500 bzw. 400 springen. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;

  --text-xxs: 0.625rem;  --text-xs: 0.75rem;   --text-sm: 0.875rem;
  --text-base: 1rem;     --text-md: 1.125rem;  --text-lg: 1.313rem;
  --text-xl: 1.5rem;     --text-2xl: 1.75rem;  --text-3xl: 2rem;
  --text-4xl: 2.25rem;   --text-5xl: 2.625rem; --text-6xl: 3rem;
  --text-7xl: 3.438rem;

  --tracking-1: .005em; --tracking-2: .01em; --tracking-3: .015em;
  --tracking-4: .02em;  --tracking-5: .03em;

  --leading-105: 1.05; --leading-110: 1.10; --leading-115: 1.15;
  --leading-120: 1.20; --leading-125: 1.25; --leading-135: 1.35;
  --leading-140: 1.40; --leading-normal: 1.5;

  /* ---- Radien und Easings (Referenz §2.4) ------------------------------ */
  --radius-sm: .25rem;  --radius-md: .375rem; --radius-lg: .5rem;
  --radius-xl: .75rem;  --radius-2xl: 1rem;   --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;   --radius-5xl: 2.5rem; --radius-pill: 999px;

  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-in-out-cubic: cubic-bezier(.65, .05, .36, 1);

  /* ---- Die Handlungsfarbe. In beiden Themes identisch, wie bei Mercury
          das Kobalt: der Fixstern der Seite. ------------------------------ */
  --accent: #0E7C86;
  --accent-hover: #0C6871;
  --accent-active: #09545C;
  --accent-on: #FFFFFF;
}

/* ---- dunkel (Standard) --------------------------------------------------- */
:root,
[data-theme="dark"] {
  --background-default: #14181A;
  --background-secondary: #1B2124;
  --background-frosted: rgb(175 200 206 / .08);

  --surface-default: #1B2124;
  --surface-elevated: #232B2F;
  --surface-inverted: #ECF0F1;
  --surface-frosted: rgb(175 200 206 / .12);

  --text-default: #ECF0F1;
  /* Angehoben von #A9B7BB. Nicht wegen der Barrierefreiheit — die war mit
     8,66:1 längst erfüllt — sondern weil der volle Text bei 15,57:1 liegt und
     die gedämpfte Stufe damit nur 56 % davon hatte. Jetzt 11,37:1, also 73 %:
     deutlich lesbarer, die Rangordnung bleibt aber erhalten. */
  --text-subdued: #C6D0D3;
  --text-emphasized: #FFFFFF;
  --text-accent: #35C4D2;            /* helle Stufe: Petrol trägt auf Dunkel nicht */

  --border-default: #3A4548;
  --border-subdued: #2A3336;
  --border-emphasized: #ECF0F1;
  --border-frosted: rgb(175 200 206 / .22);

  --icon-default: #ECF0F1;
  --icon-subdued: #A9B7BB;
  --icon-accent: #35C4D2;

  --shadow-1: 0 1px 2px rgb(4 10 12 / .34), 0 2px 8px -2px rgb(4 10 12 / .28);
  --shadow-2: 0 2px 6px rgb(4 10 12 / .30), 0 14px 34px -10px rgb(4 10 12 / .42);
  --edge: inset 0 1px 0 rgb(236 240 241 / .07);
}

/* ---- hell ---------------------------------------------------------------- */
[data-theme="light"] {
  /* Der Grund liegt bewusst deutlich unter Reinweiß. Vorher waren es
     #FAFBFB gegen #FFFFFF — 3,7 % Helligkeitsunterschied, zu wenig, als dass
     eine weiße Karte darauf hätte schweben können. Jetzt sind es 11,3 %:
     Papier liegt auf einem Tisch, statt Weiß auf Weiß zu stehen. */
  --background-default: #EEF3F3;
  --background-secondary: #E2E9EA;
  --background-frosted: rgb(20 24 26 / .03);

  --surface-default: #F1F4F4;
  --surface-elevated: #FFFFFF;
  --surface-inverted: #1B2124;
  --surface-frosted: rgb(20 24 26 / .06);

  --text-default: #1B2124;
  --text-subdued: #425055;      /* 5,49:1 → 7,47:1, dieselbe Anhebung wie dunkel */
  --text-emphasized: #0E1416;
  --text-accent: #0E7C86;            /* dunkle Stufe: dieselbe Farbe, andere Helligkeit */

  --border-default: #BCC7CA;
  --border-subdued: #D3DCDE;
  --border-emphasized: #1B2124;
  --border-frosted: rgb(20 24 26 / .14);

  --icon-default: #1B2124;
  --icon-subdued: #55646A;
  --icon-accent: #0E7C86;

  /* Drei Stufen statt zwei: eine harte Kontaktkante direkt unter der Karte,
     eine mittlere Streuung, ein weiter Wurf. Ein einzelner weicher Schatten
     sieht aus wie Nebel, erst die Kontaktkante lässt etwas aufliegen. */
  --shadow-1: 0 1px 1px rgb(27 33 36 / .06), 0 4px 8px -2px rgb(27 33 36 / .11), 0 12px 26px -10px rgb(27 33 36 / .16);
  --shadow-2: 0 1px 2px rgb(27 33 36 / .07), 0 10px 20px -6px rgb(27 33 36 / .14), 0 34px 60px -20px rgb(27 33 36 / .26);
  --edge: inset 0 1px 0 rgb(255 255 255 / .9);
}