/* Hallmark · macrostructure: Workbench (live instrument hero) · tone: precise, practical · anchor hue: emerald 148
   tokens.css: design tokens for the public landing page (landing.html).
   The app pages keep their own tokens in emerald.css; the values here mirror that palette in OKLCH.
   Axes: paper-band dark (light variant) / display geometric-sans (Rubik) / accent chromatic-green */

:root {
  /* colour: dark (default) */
  --color-paper:        oklch(14.5% 0.004 155);
  --color-surface:      oklch(19% 0.006 155);
  --color-surface-2:    oklch(23.5% 0.008 155);
  --color-field:        oklch(16.5% 0.005 155);
  --color-ink:          oklch(96.5% 0.004 155);
  --color-ink-2:        oklch(81% 0.008 155);
  --color-ink-3:        oklch(67% 0.008 155);
  --color-line:         oklch(96% 0.004 155 / 0.09);
  --color-line-2:       oklch(96% 0.004 155 / 0.16);
  --color-nav:          oklch(16% 0.005 155 / 0.78);
  --color-accent:       oklch(79% 0.21 147);
  --color-accent-ink:   oklch(84% 0.18 150);
  --color-accent-soft:  oklch(79% 0.21 147 / 0.11);
  --color-halo:         oklch(79% 0.21 147 / 0.2);
  --color-quiet:        oklch(71% 0.105 156);
  --color-quiet-soft:   oklch(71% 0.105 156 / 0.09);
  --color-quiet-line:   oklch(71% 0.105 156 / 0.26);
  --color-accent-line:  oklch(79% 0.21 147 / 0.34);
  --color-on-accent:    oklch(21% 0.05 150);
  --color-g1:           oklch(88% 0.16 155);
  --color-g2:           oklch(68% 0.19 148);
  --color-deep-1:       oklch(40% 0.1 150);
  --color-deep-2:       oklch(30% 0.07 151);
  --color-deep-3:       oklch(20% 0.03 155);
  --color-deep-ink:     oklch(97% 0.015 150);
  --color-deep-ink-2:   oklch(97% 0.015 150 / 0.78);
  --color-deep-line:    oklch(97% 0.015 150 / 0.16);
  --color-loss-1:       oklch(38% 0.12 24);
  --color-loss-2:       oklch(28% 0.08 24);
  --color-loss-3:       oklch(19% 0.03 24);
  --color-loss-ink:     oklch(78% 0.14 24);
  --color-seg-product:  oklch(97% 0.015 150 / 0.62);
  --color-seg-ads:      oklch(97% 0.015 150 / 0.38);
  --color-seg-returns:  oklch(97% 0.015 150 / 0.2);
  --color-seg-profit:   oklch(86% 0.19 150);
  --color-track:        oklch(96% 0.004 155 / 0.1);
  --color-thumb:        oklch(98% 0.004 155);
  --color-shadow:       oklch(8% 0.01 155 / 0.7);
  --color-aur-a:        oklch(79% 0.21 147 / 0.16);
  --color-aur-b:        oklch(72% 0.17 160 / 0.1);
  --color-aur-c:        oklch(75% 0.12 185 / 0.07);
  --color-wa:           oklch(72% 0.17 150);
  --color-dot:          transparent;
  --color-page-top:     transparent;
  --shadow-card:        none;
  --shadow-lift:        none;

  /* type */
  --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --text-xs: 12.5px;
  --text-sm: 13.5px;
  --text-base: 15.5px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: clamp(26px, 2.6vw + 12px, 38px);
  --text-display: clamp(34px, 3.4vw + 16px, 60px);
  --text-num: clamp(44px, 3vw + 26px, 64px);

  /* space: 4pt scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: clamp(52px, 5vw + 24px, 88px);
  --space-gutter: clamp(16px, 2.4vw, 28px);

  /* shape */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --container: 1180px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-med: 240ms;
  --dur-slow: 640ms;
}

[data-theme="light"] {
  --color-paper:        oklch(95.6% 0.011 152);
  --color-surface:      oklch(99.4% 0.004 150);
  --color-surface-2:    oklch(97% 0.008 150);
  --color-field:        oklch(96.8% 0.008 152);
  --color-ink:          oklch(17% 0.006 155);
  --color-ink-2:        oklch(37% 0.008 155);
  --color-ink-3:        oklch(46% 0.008 155);
  --color-line:         oklch(30% 0.03 155 / 0.09);
  --color-line-2:       oklch(30% 0.03 155 / 0.16);
  --color-nav:          oklch(99.4% 0.004 150 / 0.78);
  --color-accent:       oklch(53% 0.15 148);
  --color-accent-ink:   oklch(47% 0.14 148);
  --color-accent-soft:  oklch(53% 0.15 148 / 0.09);
  --color-halo:         oklch(72% 0.17 148 / 0.24);
  --color-quiet:        oklch(45% 0.08 156);
  --color-quiet-soft:   oklch(45% 0.08 156 / 0.07);
  --color-quiet-line:   oklch(45% 0.08 156 / 0.24);
  --color-accent-line:  oklch(53% 0.15 148 / 0.32);
  --color-on-accent:    oklch(98.5% 0.01 150);
  --color-g1:           oklch(76% 0.19 148);
  --color-g2:           oklch(50% 0.14 148);
  --color-track:        oklch(17% 0.006 155 / 0.12);
  --color-thumb:        oklch(99% 0.003 150);
  --color-shadow:       oklch(30% 0.03 155 / 0.22);
  --color-aur-a:        oklch(82% 0.15 148 / 0.42);
  --color-aur-b:        oklch(86% 0.1 170 / 0.38);
  --color-aur-c:        oklch(88% 0.09 120 / 0.3);
  --color-wa:           oklch(53% 0.15 148);
  --color-dot:          oklch(40% 0.06 155 / 0.13);
  --color-page-top:     oklch(90% 0.06 150 / 0.55);
  --shadow-card:        inset 0 1px 0 oklch(100% 0 0 / 0.9), 0 1px 2px oklch(35% 0.05 155 / 0.06), 0 16px 36px -18px oklch(35% 0.07 155 / 0.26);
  --shadow-lift:        inset 0 1px 0 oklch(100% 0 0 / 0.9), 0 2px 4px oklch(35% 0.05 155 / 0.06), 0 28px 50px -22px oklch(35% 0.09 152 / 0.34);
}