/* Canonical SmaugBrain frontend design tokens. */
:root {
  /* Colors */
  --smh-ink-black: #111111;
  --smh-paper-white: #ffffff;
  --smh-obsidian-warm: #272625;
  --smh-graphite-mid: #6d6c6b;
  --smh-cream-paper: #f4f3ef;
  --smh-stone-border: #b1b1af;
  --smh-pearl-mist: #ecebea;
  --smh-deep-violet: #a78bfa;
  --smh-violet-shade: #2e2460;
  --smh-ember-blue: #0d52e8;
  --smh-blush-pink: #ffd7f0;
  --smh-mint-green: #b7efb2;
  --smh-pale-yellow: #ffef99;
  --smh-lilac-wash: #e2ddfd;
  --smh-on-accent: #ffffff;
  --smh-selection-bg: rgba(13, 82, 232, 0.1);
  --smh-selection-bg-strong: #111111;
  --smh-selection-border: rgba(13, 82, 232, 0.28);
  --smh-selection-ink: #ffffff;
  --smh-selection-muted: rgba(255, 255, 255, 0.68);
  --smh-grid-line-base: rgba(151, 151, 151, 0.06);
  --smh-grid-line: rgba(17, 17, 17, 0.06);
  --smh-grid-fine: rgba(17, 17, 17, 0.028);

  /* Typography */
  --smh-font: 'Space Grotesk', 'Inter Variable', ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --smh-text-caption: 10px;
  --smh-leading-caption: 1.2;
  --smh-tracking-caption: 0;
  --smh-text-eyebrow: 12px;
  --smh-leading-eyebrow: 1.2;
  --smh-tracking-eyebrow: 0;
  --smh-text-body-sm: 14px;
  --smh-leading-body-sm: 1.3;
  --smh-tracking-body-sm: 0;
  --smh-text-body: 16px;
  --smh-leading-body: 1.3;
  --smh-tracking-body: 0;
  --smh-text-subheading: 20px;
  --smh-leading-subheading: 1.2;
  --smh-tracking-subheading: 0;
  --smh-text-heading-sm: 24px;
  --smh-leading-heading-sm: 1.2;
  --smh-tracking-heading-sm: 0;
  --smh-text-heading: 28px;
  --smh-leading-heading: 1.1;
  --smh-tracking-heading: 0;
  --smh-text-heading-lg: 36px;
  --smh-leading-heading-lg: 1.1;
  --smh-tracking-heading-lg: 0;
  --smh-text-display: 56px;
  --smh-leading-display: 1;
  --smh-tracking-display: 0;
  --smh-text-hero: 84px;
  --smh-leading-hero: 0.8;
  --smh-tracking-hero: 0;
  --smh-weight-regular: 400;
  --smh-weight-medium: 500;
  --smh-weight-bold: 700;
  --smh-weight-black: 900;

  /* Spacing */
  --smh-space-4: 4px;
  --smh-space-8: 8px;
  --smh-space-12: 12px;
  --smh-space-16: 16px;
  --smh-space-20: 20px;
  --smh-space-24: 24px;
  --smh-space-28: 28px;
  --smh-space-36: 36px;
  --smh-space-40: 40px;
  --smh-space-44: 44px;
  --smh-space-48: 48px;
  --smh-space-56: 56px;
  --smh-space-84: 84px;
  --smh-space-100: 100px;
  --smh-space-112: 112px;
  --smh-space-144: 144px;

  /* Shape and elevation */
  --smh-radius-sm: 4px;
  --smh-radius-md: 8px;
  --smh-radius-lg: 12px;
  --smh-radius-xl: 16px;
  --smh-radius-2xl: 22px;
  --smh-radius-pill: 9999px;
  --smh-shadow-subtle: rgba(17, 17, 17, 0.05) 0 0 0 1px inset;
  --smh-shadow-card: rgba(17, 17, 17, 0.04) 0 1px 2px 0,
    rgba(17, 17, 17, 0.04) 0 4px 8px 0,
    rgba(17, 17, 17, 0.04) 0 0 1px 0;
  --smh-shadow-xl: rgba(17, 17, 17, 0.12) 0 26px 60px -6px,
    rgba(17, 17, 17, 0.02) 0 28px 28px -14px,
    rgba(17, 17, 17, 0.04) 0 6px 6px -3px,
    rgba(17, 17, 17, 0.04) 0 1px 1px -0.5px;

  /* Layout and motion */
  --smh-page-max: 1420px;
  --smh-section-gap: 80px;
  --smh-card-padding: 20px;
  --smh-element-gap: 8px;
  --smh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --smh-duration-fast: 180ms;
  --smh-duration-base: 280ms;
  --smh-duration-reveal: 420ms;
}

html[data-theme='dark'] {
  --smh-ink-black: #eef4ff;
  --smh-paper-white: #0b1020;
  --smh-obsidian-warm: #060812;
  --smh-graphite-mid: #8da0bd;
  --smh-cream-paper: #10172a;
  --smh-stone-border: rgba(148, 163, 184, 0.18);
  --smh-pearl-mist: rgba(255, 255, 255, 0.06);
  --smh-deep-violet: #a78bfa;
  --smh-violet-shade: #1a1040;
  --smh-ember-blue: #0d52e8;
  --smh-blush-pink: rgba(255, 215, 240, 0.12);
  --smh-mint-green: rgba(183, 239, 178, 0.12);
  --smh-pale-yellow: rgba(255, 239, 153, 0.12);
  --smh-lilac-wash: rgba(226, 221, 253, 0.12);
  --smh-selection-bg: rgba(13, 82, 232, 0.22);
  --smh-selection-bg-strong: #17376f;
  --smh-selection-border: rgba(79, 140, 255, 0.46);
  --smh-selection-ink: #eef4ff;
  --smh-selection-muted: #b7c6dd;
  --smh-grid-line: rgba(255, 255, 255, 0.085);
  --smh-grid-fine: rgba(255, 255, 255, 0.045);
}