/* ========================================================================== 
   DESIGN TOKENS / MOTYW
   Zmiana palety w jednym miejscu. Kafelek kontaktowy korzysta z tych samych
   powierzchni co reszta strony — nie odwraca już kolorów między motywami.
   ========================================================================== */
:root {
  color-scheme: light;

  --bg: #e9eeec;
  --bg-soft: #e3e9e7;
  --surface: #f2f6f4;
  --surface-elevated: #f8faf8;
  --surface-muted: #e6edeb;
  --surface-technical: #172226;
  --surface-hero: #f7faf8;
  --surface-hero-console: #edf3f1;
  --hero-text: #172326;
  --hero-soft: #536267;
  --hero-faint: #788589;
  --hero-border: rgba(23, 35, 38, .12);
  --hero-tag-border: rgba(23, 35, 38, .13);
  --hero-tag-bg: rgba(23, 35, 38, .025);
  --hero-line-1: #172326;
  --hero-line-2: #177f95;
  --hero-line-3: #365fbc;
  --surface-contact: #dfecea;
  --surface-contact-strong: #d6e5e2;

  --text: #172326;
  --text-soft: #536267;
  --text-faint: #788589;
  --text-on-technical: #eff7f5;

  --line: rgba(23, 35, 38, .12);
  --line-strong: rgba(23, 35, 38, .22);
  --line-technical: rgba(231, 245, 242, .15);

  --accent: #177f95;
  --accent-strong: #11667a;
  --accent-soft: #cfe5e7;
  --accent-blue: #365fbc;
  --accent-blue-soft: #dbe3f5;
  --signal: #2ca47d;
  --warning: #b87921;

  --shadow-sm: 0 8px 24px rgba(28, 43, 47, .06);
  --shadow: 0 22px 66px rgba(28, 43, 47, .09);
  --shadow-header: 0 14px 40px rgba(28, 43, 47, .12);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --font-sans: Inter, "Aptos", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fira Code", "Cascadia Code", Consolas, monospace;
  --font-mono: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --container: 1440px;
  --header-height: 74px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1417;
  --bg-soft: #10191c;
  --surface: #131d21;
  --surface-elevated: #182429;
  --surface-muted: #172226;
  --surface-technical: #081014;
  --surface-hero: #081014;
  --surface-hero-console: #0b1519;
  --hero-text: #eff7f5;
  --hero-soft: rgba(239,247,245,.70);
  --hero-faint: rgba(239,247,245,.52);
  --hero-border: rgba(223,239,237,.13);
  --hero-tag-border: rgba(239,247,245,.12);
  --hero-tag-bg: rgba(239,247,245,.035);
  --hero-line-1: #f4f8f7;
  --hero-line-2: #70d9df;
  --hero-line-3: #87a7ff;
  --surface-contact: #15272a;
  --surface-contact-strong: #193035;

  --text: #edf5f3;
  --text-soft: #afc0bf;
  --text-faint: #788a8c;
  --text-on-technical: #edf7f5;

  --line: rgba(223, 239, 237, .10);
  --line-strong: rgba(223, 239, 237, .19);
  --line-technical: rgba(223, 239, 237, .13);

  --accent: #68d7df;
  --accent-strong: #8ee6e8;
  --accent-soft: #18383e;
  --accent-blue: #82a5ff;
  --accent-blue-soft: #202d4b;
  --signal: #72d5b0;
  --warning: #e5ae61;

  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .22);
  --shadow: 0 24px 72px rgba(0, 0, 0, .31);
  --shadow-header: 0 16px 48px rgba(0, 0, 0, .38);
}