/*
 * GENERATED from tokens.yaml and roles.yaml by packages/design-system/tools/gen-tokens.mjs.
 * Do not edit by hand: change the YAML and regenerate.
 * Regenerate: node packages/design-system/tools/gen-tokens.mjs generate
 *
 * Lutum design tokens, the site grammar. Components consume these variables and
 * never restate their values. Route and component tokens live in
 * apps/website/src/styles/route-tokens.css.
 */
:root {
  /* Primaries */
  --ds-canvas: #f8f7f3;
  --ds-ink: #1b2938;
  --ds-accent: #ff4e2a;

  /* Beige */
  --ds-beige-1: var(--ds-canvas);
  --ds-beige-2: #f7f2e7;
  --ds-beige-3: #e6decc;

  /* Blue ramp */
  --ds-blue-1: #e7edfa;
  --ds-blue-2: #c6d4e4;
  --ds-blue-3: #a7b8ca;
  --ds-blue-4: #879cb2;
  --ds-blue-5: #6e869e;
  --ds-blue-6: #56728c;
  --ds-blue-7: #4a647c;
  --ds-blue-8: #3a5166;
  --ds-blue-9: #2c3d50;
  --ds-blue-10: var(--ds-ink);

  /* Orange ramp */
  --ds-orange-1: #fae8e8;
  --ds-orange-2: #fecabd;
  --ds-orange-3: #fea893;
  --ds-orange-4: #ff8667;
  --ds-orange-5: #ff6a48;
  --ds-orange-6: var(--ds-accent);
  --ds-orange-7: #f44827;
  --ds-orange-8: #e64020;
  --ds-orange-9: #d83a1e;
  --ds-orange-10: #be2d13;

  /* Semantic surfaces. Every role is a Color Suite entry; same: guards the value. */
  --ds-card-light: var(--ds-beige-2);
  --ds-line-light: var(--ds-beige-3);
  --ds-dark-bg: var(--ds-ink);
  --ds-dark-card: var(--ds-blue-9);
  --ds-dark-line: var(--ds-blue-8);
  --ds-on-dark: var(--ds-canvas);
  --ds-on-dark-mid: var(--ds-blue-2);
  --ds-on-dark-muted: var(--ds-blue-3);
  --ds-accent-deep: var(--ds-orange-10);
  --ds-on-accent: var(--ds-canvas);
  --ds-on-accent-mid: var(--ds-orange-1);
  --ds-on-accent-muted: var(--ds-orange-2);

  /*
   * Cross-theme semantic constants. Adaptive theme aliases live in
   * src/styles/theme.css; the palette remains invariant so illustrations can
   * opt into a fixed art-directed surface deliberately.
   */
  --ds-accent-visual: var(--ds-accent);
  --ds-text-on-accent: var(--ds-ink);
  --ds-accent-text-strong: color-mix(in srgb, var(--ds-accent-deep) 95%, var(--ds-ink));
  --ds-accent-eyebrow: var(--ds-accent);
  --ds-on-accent-eyebrow: var(--ds-on-accent);
  --ds-action-primary-background: var(--ds-accent);
  --ds-action-primary-foreground: var(--ds-on-accent);

  /* Surface effects. Derived here so components never invent colours. */
  --ds-wash-light: color-mix(in srgb, var(--ds-ink) 5%, transparent);
  --ds-wash-light-line: color-mix(in srgb, var(--ds-ink) 12%, transparent);
  --ds-wash-dark: color-mix(in srgb, var(--ds-canvas) 6%, transparent);
  --ds-wash-dark-line: color-mix(in srgb, var(--ds-canvas) 14%, transparent);
  --ds-overlay-dark: color-mix(in srgb, var(--ds-ink) 82%, transparent);
  --ds-overlay-dark-soft: color-mix(in srgb, var(--ds-ink) 24%, transparent);
  --ds-focus-ring: var(--ds-accent-deep);

  /* Typography */
  --ds-font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ds-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /*
   * Type scale. Semantic page aliases below may point at these steps, but
   * components should not introduce one-off sizes of their own.
   */
  --ds-font-fine-print: 0.62rem;
  --ds-font-caption: 0.72rem;
  --ds-font-small: 0.82rem;
  --ds-font-copy-small: 0.9rem;
  --ds-font-control: 0.92rem;
  --ds-font-base: 1rem;
  --ds-font-subheading: 1.35rem;
  --ds-font-heading-small: 1.5rem;

  /* Leading and tracking are named for their role, not their location. */
  --ds-leading-solid: 1;
  --ds-leading-display: 1.08;
  --ds-leading-heading: 1.1;
  --ds-leading-tight: 1.2;
  --ds-leading-compact: 1.35;
  --ds-leading-label: 1.4;
  --ds-leading-normal: 1.5;
  --ds-leading-body: 1.55;
  --ds-leading-relaxed: 1.6;
  --ds-leading-prose: 1.65;
  --ds-tracking-display: -0.035em;
  --ds-tracking-title: -0.025em;
  --ds-tracking-heading: -0.02em;
  --ds-tracking-subtle: -0.015em;
  --ds-tracking-tight: -0.01em;
  --ds-tracking-meta: 0.12em;
  --ds-tracking-label: 0.14em;
  --ds-tracking-caps: 0.16em;
  --ds-tracking-eyebrow: 0.18em;

  /*
   * Spacing follows a four-pixel base rhythm. The two control steps preserve
   * the established compact button geometry without adding historical noise
   * to the general scale.
   */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-14: 3.5rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;
  --ds-space-28: 7rem;
  --ds-space-32: 8rem;
  --ds-space-control-block: 0.65rem;
  --ds-space-control-inline: 1.2rem;
  --ds-space-none: 0px;

  /* Shape */
  --ds-radius-2: 2px;
  --ds-radius-3: 3px;
  --ds-radius-4: 4px;
  --ds-radius-5: 5px;
  --ds-radius-6: 6px;
  --ds-radius-8: 8px;
  --ds-radius-art: 10px;
  --ds-radius-12: 12px;
  --ds-radius-14: 14px;
  --ds-radius-card: 15px;
  --ds-radius-16: 16px;
  --ds-radius-17: 17px;
  --ds-radius-18: 18px;
  --ds-radius-30: 30px;
  --ds-radius-34: 34px;
  --ds-radius-pill: 100px;
  --ds-radius-full: 999px;
  --ds-radius-round: 50%;

  /* Elevation. Every shadow is mixed from Lutum ink. */
  --ds-elevation-1: 0 4px 12px -8px color-mix(in srgb, var(--ds-ink) 26%, transparent);
  --ds-elevation-2: 0 18px 44px -20px color-mix(in srgb, var(--ds-ink) 34%, transparent);
  --ds-elevation-3: 0 28px 64px -28px color-mix(in srgb, var(--ds-ink) 42%, transparent);

  /* Motion vocabulary: short UI feedback, explanatory reveals, constant flow. */
  --ds-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ds-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ds-ease-linear: linear;
  --ds-ease-native-out: ease-out;
  --ds-duration-press: 120ms;
  --ds-duration-fast: 140ms;
  --ds-duration-ui: 180ms;
  --ds-duration-settle: 220ms;
  --ds-duration-expand: 250ms;
  --ds-duration-sequence: 420ms;
  --ds-duration-reveal: 450ms;
  --ds-duration-enter: 520ms;
  --ds-duration-explain: 600ms;
  --ds-duration-emphasis: 760ms;
  --ds-stagger: 60ms;
}