/* ==========================================================================
   Design tokens — Gamberro Calm Work OS
   34 color tokens, identical names in light/dark; only values change.
   Typography, spacing and radius are the same in both themes.
   ========================================================================== */

:root {
  --color-surface: #fcf8f8;
  --color-surface-dim: #dcd9d9;
  --color-surface-bright: #fcf8f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container: #f0edec;
  --color-surface-container-high: #ebe7e7;
  --color-surface-container-highest: #e5e2e1;
  --color-surface-tint: #203886;
  --color-surface-variant: #e5e2e1;
  --color-on-surface: #1c1b1b;
  --color-on-surface-variant: #444651;
  --color-inverse-surface: #313030;
  --color-inverse-on-surface: #f3f0ef;
  --color-inverse-primary: #90a5fa;
  --color-outline: #757682;
  --color-outline-variant: #c5c5d3;
  --color-primary: #00206f;
  --color-on-primary: #ffffff;
  --color-primary-container: #203886;
  --color-on-primary-container: #90a5fa;
  --color-primary-fixed: #dbe1ff;
  --color-primary-fixed-dim: #b3c5ff;
  --color-on-primary-fixed: #00184a;
  --color-on-primary-fixed-variant: #23428e;
  --color-secondary: #676000;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #f5e642;
  --color-on-secondary-container: #6e6600;
  --color-secondary-fixed: #ffd8e8;
  --color-secondary-fixed-dim: #ffafd4;
  --color-on-secondary-fixed: #3d0027;
  --color-on-secondary-fixed-variant: #801d59;
  --color-tertiary: #550032;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #7d004b;
  --color-on-tertiary-container: #ff7fb8;
  --color-tertiary-fixed: #6dfe9c;
  --color-tertiary-fixed-dim: #4de082;
  --color-on-tertiary-fixed: #00210c;
  --color-on-tertiary-fixed-variant: #005227;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-background: #fcf8f8;
  --color-on-background: #1c1b1b;

  /* Typography */
  --font-manrope: 'Manrope', system-ui, sans-serif;
  --font-space-grotesk: 'Space Grotesk', system-ui, sans-serif;
  --font-instrument-serif: 'Instrument Serif', serif;

  --text-display-hero-size: 40px;
  --text-display-hero-line: 48px;
  --text-display-hero-tracking: -0.03em;
  --text-display-hero-weight: 700;

  --text-display-hero-mobile-size: 30px;
  --text-display-hero-mobile-line: 38px;
  --text-display-hero-mobile-tracking: -0.02em;

  --text-headline-lg-size: 28px;
  --text-headline-lg-line: 36px;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-lg-weight: 600;

  --text-headline-md-size: 22px;
  --text-headline-md-line: 28px;
  --text-headline-md-tracking: -0.015em;
  --text-headline-md-weight: 600;

  --text-headline-sm-size: 18px;
  --text-headline-sm-line: 24px;
  --text-headline-sm-tracking: -0.01em;
  --text-headline-sm-weight: 600;

  --text-body-lg-size: 16px;
  --text-body-lg-line: 24px;
  --text-body-lg-weight: 400;

  --text-body-md-size: 14px;
  --text-body-md-line: 20px;
  --text-body-md-weight: 400;

  --text-body-sm-size: 13px;
  --text-body-sm-line: 18px;
  --text-body-sm-weight: 500;

  --text-label-caps-size: 11px;
  --text-label-caps-line: 14px;
  --text-label-caps-tracking: 0.06em;
  --text-label-caps-weight: 700;

  --text-label-badge-size: 12px;
  --text-label-badge-line: 16px;
  --text-label-badge-tracking: 0.02em;
  --text-label-badge-weight: 600;

  --text-button-size: 13px;
  --text-button-line: 16px;
  --text-button-tracking: 0.01em;
  --text-button-weight: 700;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.8rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;

  /* Radius */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-card-sm: 12px;
  --radius-thumbnail: 6px;
  --radius-thumbnail-sm: 5px;
  --radius-input: 8px;
  --radius-checkbox: 4px;

  /* Shadows */
  --shadow-resting: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-resting-hover: 0 6px 18px rgba(0, 0, 0, 0.11);
  --shadow-floating: 0 12px 45px rgba(0, 0, 0, 0.2);
  --shadow-hairline: 0 1px 8px rgba(0, 0, 0, 0.04);

  /* Grid */
  --nav-rail-collapsed: 72px;
  --nav-rail-expanded: 260px;
  --margin-desktop: 3rem;
  --margin-tablet: 2rem;
  --margin-mobile: 1rem;
  --gutter-desktop: 2rem;
  --gutter-tablet: 1.5rem;
  --gutter-mobile: 1rem;

  /* Motion — the ONLY animated element in the app is the theme toggle */
  --motion-theme-toggle: 200ms ease-out;

  color-scheme: light;
}

html[data-theme='dark'] {
  --color-surface: #13131a;
  --color-surface-dim: #13131a;
  --color-surface-bright: #393840;
  --color-surface-container-lowest: #0d0e14;
  --color-surface-container-low: #1b1b22;
  --color-surface-container: #1f1f26;
  --color-surface-container-high: #292931;
  --color-surface-container-highest: #34343c;
  --color-surface-tint: #b3c5ff;
  --color-surface-variant: #34343c;
  --color-on-surface: #e4e1eb;
  --color-on-surface-variant: #c4c6d3;
  --color-inverse-surface: #e4e1eb;
  --color-inverse-on-surface: #303037;
  --color-inverse-primary: #3e5ba7;
  --color-outline: #8e909c;
  --color-outline-variant: #444651;
  --color-primary: #b3c5ff;
  --color-on-primary: #002a76;
  --color-primary-container: #7b97e8;
  --color-on-primary-container: #012c78;
  --color-primary-fixed: #dbe1ff;
  --color-primary-fixed-dim: #b3c5ff;
  --color-on-primary-fixed: #00184a;
  --color-on-primary-fixed-variant: #23428e;
  --color-secondary: #ffafd4;
  --color-on-secondary: #620041;
  --color-secondary-container: #801d59;
  --color-on-secondary-container: #ff92c9;
  --color-secondary-fixed: #ffd8e8;
  --color-secondary-fixed-dim: #ffafd4;
  --color-on-secondary-fixed: #3d0027;
  --color-on-secondary-fixed-variant: #801d59;
  --color-tertiary: #4de082;
  --color-on-tertiary: #003919;
  --color-tertiary-container: #00b15b;
  --color-on-tertiary-container: #003b1a;
  --color-tertiary-fixed: #6dfe9c;
  --color-tertiary-fixed-dim: #4de082;
  --color-on-tertiary-fixed: #00210c;
  --color-on-tertiary-fixed-variant: #005227;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --color-background: #13131a;
  --color-on-background: #e4e1eb;

  color-scheme: dark;
}