/* Quilty design tokens: primitive pastels → semantic roles → components. */
:root {
  /* Primitive palette */
  --blush-50: #FDF2F4;
  --blush-100: #F9E0E6;
  --mint-50: #EEF8F3;
  --mint-100: #D9F0E5;
  --lavender-50: #F3F0FB;
  --lavender-100: #E4DCF7;
  --butter-50: #FFF9E8;
  --butter-100: #FCEFC9;
  --sky-50: #EEF6FC;
  --sky-100: #D8EAF8;
  --ink-900: #2F2A3A;
  --iris-600: #5646C9;

  /* Semantic: light */
  --bg: #F6F1F8;
  --bg-deep: #EEE7F3;
  --surface: #FFFDFC;
  --surface-raised: #FFFFFF;
  --surface-muted: #F1ECF6;
  --surface-sunken: #EAE3F0;
  --border: #DDD4E7;
  --border-strong: #B8ACCA;
  --ink: #2F2A3A;
  --ink-soft: #494054;
  --muted: #625A71;
  --faint: #877D97;
  --accent: #5646C9;
  --accent-hover: #4635B2;
  --accent-soft: #E6E0FA;
  --accent-softer: #F2EEFC;
  --on-accent: #FFFFFF;
  --rose: #B95F76;
  --rose-soft: #FBE8ED;
  --mint: #307257;
  --mint-soft: #E3F3EA;
  --butter: #8A6218;
  --butter-soft: #FDF3D4;
  --sky: #286683;
  --sky-soft: #E6F2FA;
  --danger: #A2384C;
  --danger-soft: #FBE7EB;
  --focus: #2E6DB4;
  --selection: #5646C9;
  --canvas: #EDE7F2;
  --canvas-grid: rgba(86, 70, 201, 0.09);
  --overlay: rgba(35, 27, 48, 0.46);
  --shadow-sm: 0 1px 2px rgba(47, 42, 58, 0.06), 0 4px 12px rgba(47, 42, 58, 0.04);
  --shadow-md: 0 8px 30px rgba(47, 42, 58, 0.10), 0 2px 6px rgba(47, 42, 58, 0.06);
  --shadow-lg: 0 24px 70px rgba(47, 42, 58, 0.18);
  --scrim: rgba(38, 30, 50, 0.42);

  /* Type */
  --font-ui: "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.3rem, 5vw, 4.1rem);

  /* Space, shape, motion */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.4rem;
  --radius: 0.7rem;
  --radius-md: 0.95rem;
  --radius-lg: 1.35rem;
  --radius-xl: 1.8rem;
  --radius-pill: 999px;
  --header-h: 4.25rem;
  --tabs-h: 3.25rem;
  --status-h: 2rem;
  --motion-fast: 120ms;
  --motion: 220ms;
  --ease: cubic-bezier(0.22, 0.8, 0.25, 1);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus);
  --selection-tint: color-mix(in srgb, var(--accent) 12%, transparent);
}

:root[data-theme="dark"] {
  --bg: #1B1723;
  --bg-deep: #15111C;
  --surface: #27212F;
  --surface-raised: #302938;
  --surface-muted: #342C3F;
  --surface-sunken: #211B29;
  --border: #4A4058;
  --border-strong: #74658B;
  --ink: #F7F2FB;
  --ink-soft: #E4DBED;
  --muted: #C7BCD8;
  --faint: #A496B8;
  --accent: #C3B4FF;
  --accent-hover: #D8CCFF;
  --accent-soft: #3F3564;
  --accent-softer: #332A50;
  --on-accent: #211A31;
  --rose: #F0A6B7;
  --rose-soft: #4A2B35;
  --mint: #94D6B7;
  --mint-soft: #244236;
  --butter: #F0D088;
  --butter-soft: #473C23;
  --sky: #9CCDE8;
  --sky-soft: #263D4C;
  --danger: #FFACBA;
  --danger-soft: #4A2830;
  --focus: #A9CCFF;
  --selection: #C3B4FF;
  --canvas: #211B29;
  --canvas-grid: rgba(195, 180, 255, 0.10);
  --overlay: rgba(8, 5, 12, 0.68);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 70px rgba(0, 0, 0, 0.5);
  --scrim: rgba(8, 5, 12, 0.62);
  --selection-tint: color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-theme="contrast"] {
  --bg: #FFFFFF;
  --bg-deep: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-muted: #F4F4F4;
  --surface-sunken: #EAEAEA;
  --border: #000000;
  --border-strong: #000000;
  --ink: #000000;
  --ink-soft: #000000;
  --muted: #202020;
  --faint: #333333;
  --accent: #0000BB;
  --accent-hover: #000088;
  --accent-soft: #E6E6FF;
  --accent-softer: #F4F4FF;
  --on-accent: #FFFFFF;
  --rose: #8A002A;
  --rose-soft: #FFE9EE;
  --mint: #00502E;
  --mint-soft: #E4FFF2;
  --butter: #5E3B00;
  --butter-soft: #FFF4CC;
  --sky: #004A70;
  --sky-soft: #E5F5FF;
  --danger: #A00018;
  --danger-soft: #FFE8EB;
  --focus: #0000BB;
  --selection: #0000BB;
  --canvas: #FFFFFF;
  --canvas-grid: rgba(0, 0, 0, 0.18);
  --overlay: rgba(0, 0, 0, 0.75);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --scrim: rgba(0, 0, 0, 0.7);
  --selection-tint: #FFFF00;
}

:root[data-text-scale="large"] { font-size: 18px; }
:root[data-text-scale="larger"] { font-size: 20px; }

@media (prefers-contrast: more) {
  :root:not([data-theme="contrast"]) {
    --border: var(--border-strong);
    --muted: var(--ink-soft);
    --faint: var(--muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root, :root[data-motion="full"] {
    --motion-fast: 0ms;
    --motion: 0ms;
  }
}

:root[data-motion="reduced"] {
  --motion-fast: 0ms;
  --motion: 0ms;
}