/*
 * Design tokens — generated from Figma file "Apolos Design System" (QLB5jDDwJ3TrRKQASTU7xp).
 * Source of truth is Figma Variables. Do not hand-edit hex/px values here —
 * re-run the token export (see SYNC.md) after changing variables in Figma.
 */

/* Base = Light. Also matches [data-theme="light"] so a subtree can force Light
   even inside a Dark ancestor (e.g. side-by-side light/dark previews). */
:root,
[data-theme="light"] {
  /* primitives — mode-invariant */
  --color-neutral-50: #ffffff;
  --color-neutral-100: #f7f7fb;
  --color-neutral-200: #e7e5f0;
  --color-neutral-300: #d3d1e0;
  --color-neutral-400: #aba8c2;
  --color-neutral-500: #85829f;
  --color-neutral-600: #5c5a6e;
  --color-neutral-700: #3f3d52;
  --color-neutral-800: #262436;
  --color-neutral-900: #1c1b29;

  --color-mint-50: #f2fbf6;
  --color-mint-100: #e3f6eb;
  --color-mint-200: #d7f0e3;
  --color-mint-300: #bce5d0;
  --color-mint-400: #9ad8b8;
  --color-mint-500: #7fc8a0;
  --color-mint-600: #5fae85;
  --color-mint-700: #458c68;
  --color-mint-800: #326b4f;
  --color-mint-900: #214a37;

  --color-cream-50: #fffcf0;
  --color-cream-100: #fef8de;
  --color-cream-200: #fdf3d0;
  --color-cream-300: #fbe9aa;
  --color-cream-400: #f4db7e;
  --color-cream-500: #e8c84a;
  --color-cream-600: #cda931;
  --color-cream-700: #a6852a;
  --color-cream-800: #7a6320;
  --color-cream-900: #524316;

  --color-lavender-50: #faf6fe;
  --color-lavender-100: #f2e9fc;
  --color-lavender-200: #ede0fb;
  --color-lavender-300: #dcc5f5;
  --color-lavender-400: #cba9ee;
  --color-lavender-500: #b89be8;
  --color-lavender-600: #9d78d6;
  --color-lavender-700: #7e5bb3;
  --color-lavender-800: #5f4488;
  --color-lavender-900: #42305f;

  --color-pink-50: #fff3f4;
  --color-pink-100: #fde0e3;
  --color-pink-200: #fbd3d8;
  --color-pink-300: #f6aab3;
  --color-pink-400: #ee7e8c;
  --color-pink-500: #de5066;
  --color-pink-600: #b23a4e;
  --color-pink-700: #8c2c3d;
  --color-pink-800: #671f2c;
  --color-pink-900: #451520;

  --color-indigo-50: #eef0fe;
  --color-indigo-100: #dbe0fd;
  --color-indigo-200: #b9c2fb;
  --color-indigo-300: #97a4f8;
  --color-indigo-400: #8390f4;
  --color-indigo-500: #6f7cf0;
  --color-indigo-600: #525fd6;
  --color-indigo-700: #3d49ad;
  --color-indigo-800: #2b3480;
  --color-indigo-900: #1c2257;

  /* semantics — Light mode (default) */
  --bg-canvas: #ffffff;
  --bg-surface: #ffffff;
  --bg-sunken: #f7f7fb;
  --bg-disabled: #f7f7fb;
  /* Dark, elevated surface (Toast) — neutral/800 in Light, neutral/700 in Dark for contrast against the canvas. */
  --bg-dark: #262436;

  --text-primary: #1c1b29;
  --text-secondary: #5c5a6e;
  --text-disabled: #aba8c2;
  --text-on-primary: #ffffff;
  /* Fixed-contrast text (not theme-aware) — same value in both modes, for use on fixed-dark/fixed-light surfaces like Toast. */
  --text-light-fix: #ffffff;
  --text-dark-fix: #1c1b29;

  --border-subtle: #e7e5f0;
  --border-default: #d3d1e0;

  --primary-default: #525fd6;
  --primary-hover: #3d49ad;
  --primary-active: #2b3480;
  --primary-pressed: #2b3480;
  --primary-subtle: #dbe0fd;

  --success-default: #7fc8a0;
  --success-subtle: #e3f6eb;
  --success-border: #7fc8a0;
  --success-text: #326b4f;

  --warning-default: #e8c84a;
  --warning-subtle: #fef8de;
  --warning-border: #e8c84a;
  --warning-text: #7a6320;

  --danger-default: #b23a4e;
  --danger-hover: #8c2c3d;
  --danger-subtle: #fde0e3;
  --danger-text: #8c2c3d;

  --surface-mint-fill: #e3f6eb;
  --surface-mint-border: #7fc8a0;
  --surface-cream-fill: #fef8de;
  --surface-cream-border: #e8c84a;
  --surface-lavender-fill: #f2e9fc;
  --surface-lavender-border: #b89be8;

  --tag-people-bg: #fde0e3;
  --tag-people-text: #b23a4e;
  --tag-designops-bg: #6f7cf0;
  --tag-designops-text: #ffffff;

  /* spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  /* grid — responsive layout grid; margins/gutters alias the spacing scale
     (mirrors the Figma "Grid" variable collection) */
  --grid-desktop-columns: 12;
  --grid-desktop-margin: var(--spacing-8);
  --grid-desktop-gutter: var(--spacing-8);
  --grid-tablet-columns: 8;
  --grid-tablet-margin: var(--spacing-8);
  --grid-tablet-gutter: var(--spacing-5);
  --grid-mobile-columns: 4;
  --grid-mobile-margin: var(--spacing-4);
  --grid-mobile-gutter: var(--spacing-4);

  /* radius */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* icon */
  --icon-stroke-weight: 1px;

  /* motion — durations + easing curves */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(28, 27, 41, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 27, 41, 0.06);
  --shadow-lg: 0 10px 24px rgba(28, 27, 41, 0.08);
  --shadow-xl: 0 20px 40px rgba(28, 27, 41, 0.10);
  --shadow-mint: 0 8px 20px rgba(127, 200, 160, 0.25);
  --shadow-cream: 0 8px 20px rgba(232, 200, 74, 0.25);
  --shadow-lavender: 0 8px 20px rgba(184, 155, 232, 0.25);
  --shadow-primary: 0 8px 20px rgba(111, 124, 240, 0.25);

  /* typography */
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  --text-2xs-size: 10px; --text-2xs-line: 12px;
  --text-xs-size: 12px; --text-xs-line: 16px;
  --text-sm-size: 14px; --text-sm-line: 20px;
  --text-base-size: 16px; --text-base-line: 24px;
  --text-lg-size: 18px; --text-lg-line: 28px;
  --text-xl-size: 20px; --text-xl-line: 28px;
  --text-2xl-size: 24px; --text-2xl-line: 32px;
  --text-3xl-size: 32px; --text-3xl-line: 40px;
  --text-4xl-size: 40px; --text-4xl-line: 48px;
  --text-5xl-size: 48px; --text-5xl-line: 56px;
}

/* semantics — Dark mode. Matches data-theme="dark" on :root (consuming apps)
   or on any ancestor element (Storybook's per-story decorator div), since
   custom properties cascade to descendants either way. */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg-canvas: #1c1b29;
  --bg-surface: #262436;
  --bg-sunken: #1c1b29;
  --bg-disabled: #262436;
  --bg-dark: #3f3d52;

  --text-primary: #ffffff;
  --text-secondary: #aba8c2;
  --text-disabled: #5c5a6e;
  --text-on-primary: #ffffff;
  --text-light-fix: #ffffff;
  --text-dark-fix: #1c1b29;

  --border-subtle: #3f3d52;
  --border-default: #85829f;

  --primary-default: #525fd6;
  --primary-hover: #3d49ad;
  --primary-active: #eef0fe;
  --primary-pressed: #3d49ad;
  --primary-subtle: #525fd6;

  --success-default: #7fc8a0;
  --success-subtle: #214a37;
  --success-border: #5fae85;
  --success-text: #bce5d0;

  --warning-default: #e8c84a;
  --warning-subtle: #524316;
  --warning-border: #cda931;
  --warning-text: #fbe9aa;

  --danger-default: #b23a4e;
  --danger-hover: #8c2c3d;
  --danger-subtle: #451520;
  --danger-text: #f6aab3;

  --surface-mint-fill: #214a37;
  --surface-mint-border: #458c68;
  --surface-cream-fill: #524316;
  --surface-cream-border: #a6852a;
  --surface-lavender-fill: #42305f;
  --surface-lavender-border: #7e5bb3;

  --tag-people-bg: #451520;
  --tag-people-text: #fbd3d8;
  --tag-designops-bg: #1c2257;
  --tag-designops-text: #ffffff;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}