/*
  Novon Tech — design tokens.
  Foundations come from the Aspen Search design system in .claude/skills/design-system/SKILL.md.
  Values marked "ext" extend the system for this site; add new values here, never inline.
*/
:root {
  /* Typography */
  --font-family-primary: "Suisse Intl", suisseIntl, "Inter Tight", "suisseIntl Fallback", Arial, system-ui, sans-serif, ui-sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "Suisse Intl Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ext: labels, meta */
  --font-size-base: 16px;
  --font-weight-base: 450;
  --font-size-read: 17px;      /* ext: running text, for readability */
  --line-height-read: 1.55;    /* ext: running text */
  --font-weight-display: 500; /* ext */
  --line-height-base: 20.8px;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 24px;
  --font-size-xl: 37.91px;
  --font-size-2xl: 80px;
  --font-size-3xl: 114.78px;
  --font-size-4xl: 123.53px;

  /* Responsive display steps: fluid between system sizes, never outside them */
  --font-size-display-l: clamp(var(--font-size-xl), 8.4vw, var(--font-size-4xl));
  --font-size-display-m: clamp(var(--font-size-xl), 7.2vw, var(--font-size-3xl));
  --font-size-display-s: clamp(var(--font-size-xl), 5.4vw, var(--font-size-2xl));
  --font-size-title: clamp(var(--font-size-lg), 2.6vw, var(--font-size-xl));

  /* Color palette — the logo's teal on white, with a deep teal for text and dark panels
     (contrast ratios noted, WCAG AA). Text on the teal accent is always pure white. */
  --color-text-primary: #16323b;      /* deep teal ink — 13.5:1 on white */
  --color-text-secondary: #ffffff;
  --color-text-tertiary: rgb(255 255 255 / 0.72); /* secondary text on ink — 7.8:1 */
  --color-text-inverse: rgb(22 50 59 / 0.8);      /* secondary text on white — 6.9:1 */
  --color-surface-base: #16323b;      /* frame and hairlines */
  --color-surface-raised: #497a89;    /* logo teal — the accent; white on it 4.7:1 */

  --color-brand-logo: #497a89;        /* ext: logo teal */
  --color-accent-sun: #f5b83d;        /* ext: saffron — the bright accent; ink on it 7.6:1, on dark ink 7.6:1 */
  --color-accent-sun-deep: #e9a21a;   /* ext: saffron hover */
  --color-text-on-sun-muted: rgb(22 50 59 / 0.85); /* ext: secondary text on saffron — 5.6:1 */
  --color-surface-paper: #ffffff;     /* ext: default light panel, like the logo's background */
  --color-surface-muted: #eef2f3;     /* ext: light grey panel */
  --color-surface-deep: #0c1d22;      /* ext: dark-theme panel */
  --color-surface-night: #122a31;     /* ext: dark-theme grey panel */
  --color-surface-ink-dark: #15343d;  /* ext: dark-theme ink panel */
  --color-text-ice: #eef5f6;          /* ext: dark-theme text — 15.7:1 */
  --color-text-ice-muted: rgb(238 245 246 / 0.7); /* ext: dark-theme secondary — 6.7:1 or more */
  --color-line-dark: #2a4a53;         /* ext: dark-theme hairline */
  --color-text-muted-strong: #3d5a63; /* ext: secondary text on grey panel — 6.6:1 */
  --color-feedback-error: #b3261e;    /* ext: 6.5:1 on white */
  --color-feedback-error-dark: #ff8a80; /* ext: 6.5:1 or more on dark panels */
  --color-feedback-live: #1f9d55;     /* ext: "live" status dot, always paired with text */
  --color-rule-light: rgb(22 50 59 / 0.18);   /* ext: inner divider on light panels */
  --color-rule-dark: rgb(238 245 246 / 0.2);  /* ext: inner divider on dark panels */

  /* Spacing */
  --space-1: 4px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 52px;
  --space-5: 60.2px;
  --space-6: 154.51px;
  --space-7: 163.74px;
  --space-8: 223.43px;

  /* Motion */
  --motion-duration-instant: 200ms;
  --motion-duration-fast: 300ms;
  --motion-duration-normal: 600ms;
  --motion-duration-slow: 800ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* ext */

  /* Layout (ext) */
  --layout-max: 1680px;
  --header-h: 56px;
  --line-w: 1px;
  --mark-size: 8px;
  --icon-size: 16px;
  --tap-min: 44px;
  --radius-pill: 999px;   /* buttons, tags, chips — echo the logo's round terminals */
  --radius-control: 12px; /* inputs, notices */
}