/* @loops/design tokens.
   Every value comes from DESIGN.md (Loops: Style Reference) and the Figma
   collections behind it (Loops Primitives, Loops Color, Loops Scale, Loops
   Motion). DESIGN.md names a token `--canvas`; here it ships as
   `--loops-canvas`, and aliases.css maps the short names back on request.

   Light is the base. Dark is the same names with other values, reached
   three ways: the system setting (unless the document asks for light), an
   explicit data-theme="dark" on the document, and data-theme on any element
   for its own subtree. tokens.test.ts checks every value against DESIGN.md. */

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* colour, light */
  --loops-canvas: #FAF9F6;
  --loops-surface: #FFFFFF;
  --loops-inset: #F2F0EB;
  --loops-rule: #E5E2DA;
  --loops-rule-2: #D2CEC4;
  --loops-ink: #0B0B0A;
  --loops-ink-hover: #2A2926;
  --loops-ink-2: #57554F;
  --loops-ink-3: #6E6C65;
  --loops-on-ink: #FAF9F6;
  --loops-accent: #0B7A6B;
  --loops-accent-wash: #E4F0ED;
  --loops-accent-edge: #0B7A6B33;
  --loops-accent-deep: #095F54;
  --loops-miss: #B3402F;
  --loops-partial: #8A6512;
  /* what sits behind a dialog: the canvas, mostly opaque. No blur. */
  --loops-scrim: #FAF9F6D9;

  /* focus: a 2px --loops-accent ring, 3px off a control, inset on a row */
  --loops-focus-width: 2px;
  --loops-focus-offset: 3px;
  --loops-focus-offset-inset: -2px;

  /* type */
  --loops-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --loops-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --loops-weight-regular: 400;
  --loops-weight-medium: 500;

  --loops-text-display-xl: 56px; --loops-leading-display-xl: 0.96; --loops-tracking-display-xl: -2.24px;
  --loops-text-display-l: 42px;  --loops-leading-display-l: 1.00;  --loops-tracking-display-l: -1.13px;
  --loops-text-heading-l: 32px;  --loops-leading-heading-l: 1.15;  --loops-tracking-heading-l: -0.64px;
  --loops-text-heading-m: 24px;  --loops-leading-heading-m: 1.19;  --loops-tracking-heading-m: -0.29px;
  --loops-text-heading-s: 20px;  --loops-leading-heading-s: 1.20;  --loops-tracking-heading-s: -0.22px;
  --loops-text-subheading: 18px; --loops-leading-subheading: 1.20; --loops-tracking-subheading: -0.18px;
  --loops-text-body-l: 16px;     --loops-leading-body-l: 1.33;     --loops-tracking-body-l: -0.18px;
  --loops-text-body-m: 14px;     --loops-leading-body-m: 1.50;     --loops-tracking-body-m: -0.14px;
  --loops-leading-prose: 1.6;
  --loops-text-label: 14px;      --loops-leading-label: 1.25;      --loops-tracking-label: -0.14px;
  --loops-text-label-sm: 13px;   --loops-leading-label-sm: 1.25;   --loops-tracking-label-sm: -0.14px;
  --loops-text-label-lg: 15px;   --loops-leading-label-lg: 1.25;   --loops-tracking-label-lg: -0.14px;
  --loops-text-caption: 12px;    --loops-leading-caption: 1.20;    --loops-tracking-caption: 0.12px;
  --loops-text-mono: 12px;       --loops-leading-mono: 1.30;       --loops-tracking-mono: 0px;
  --loops-text-eyebrow: 10px;    --loops-leading-eyebrow: 1.20;    --loops-tracking-eyebrow: 2px;
  /* the verdict pill's tracking, 0.14em of its 10px */
  --loops-tracking-pill: 0.14em;

  /* space: every padding and gap is one of these */
  --loops-space-2: 2px;
  --loops-space-4: 4px;
  --loops-space-6: 6px;
  --loops-space-8: 8px;
  --loops-space-10: 10px;
  --loops-space-12: 12px;
  --loops-space-16: 16px;
  --loops-space-20: 20px;
  --loops-space-24: 24px;
  --loops-space-32: 32px;
  --loops-space-40: 40px;
  --loops-space-64: 64px;

  /* radius: the maximum is 4, and anything you act on is square */
  --loops-r-button: 0px;
  --loops-r-input: 0px;
  --loops-r-icon: 4px;
  --loops-r-tag: 4px;
  --loops-r-card: 0px;
  --loops-r-media: 0px;

  /* the hairline */
  --loops-hairline: 1px;

  /* layout */
  --loops-max: 1400px;
  --loops-nav-h: 58px;
  --loops-btn-h-sm: 36px;
  --loops-btn-h-md: 44px;
  --loops-btn-h-lg: 52px;
  --loops-faq-row-h: 68px;
  --loops-gutter: clamp(20px, 4vw, 44px);
  --loops-bay: clamp(40px, 4.5vw, 64px);
  --loops-sec-y: calc(var(--loops-bay) * 1.5);
  --loops-hero-y: calc(var(--loops-bay) * 1.25);

  /* measure: the only text max-widths */
  --loops-measure-lead: 54ch;
  --loops-measure-body: 66ch;
  --loops-measure-caption: 28ch;

  /* motion */
  --loops-dur-fast: 150ms;
  --loops-dur-base: 240ms;
  --loops-dur-enter: 600ms;
  --loops-dur-land: 720ms;
  --loops-dur-breathe: 2400ms;
  --loops-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --loops-ease-enter: cubic-bezier(.65, 0, .35, 1);
  --loops-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --loops-ease: cubic-bezier(.2, .7, .2, 1);
  --loops-step: 100ms;
  --loops-step-tight: 60ms;
  --loops-step-dot: 30ms;
  --loops-travel: 28px;
  --loops-travel-sm: 16px;
  --loops-travel-lg: 48px;
  --loops-zoom-from: 1.06;
  --loops-decode-char: 300ms;
  --loops-decode-step: 40ms;
  --loops-slow: 640ms;
  --loops-ticker: 40s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --loops-canvas: #0A0A09;
    --loops-surface: #121211;
    --loops-inset: #1B1B19;
    --loops-rule: #242421;
    --loops-rule-2: #3A3A35;
    --loops-ink: #FAF9F6;
    --loops-ink-hover: #E5E2DA;
    --loops-ink-2: #B4B4B2;
    --loops-ink-3: #868684;
    --loops-on-ink: #0B0B0A;
    --loops-accent: #45DCC4;
    --loops-accent-wash: #0C2320;
    --loops-accent-edge: #45DCC43D;
    --loops-accent-deep: #7BDCCB;
    --loops-miss: #E08877;
    --loops-partial: #D8B45E;
    --loops-scrim: #0A0A09D9;
  }
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --loops-canvas: #0A0A09;
  --loops-surface: #121211;
  --loops-inset: #1B1B19;
  --loops-rule: #242421;
  --loops-rule-2: #3A3A35;
  --loops-ink: #FAF9F6;
  --loops-ink-hover: #E5E2DA;
  --loops-ink-2: #B4B4B2;
  --loops-ink-3: #868684;
  --loops-on-ink: #0B0B0A;
  --loops-accent: #45DCC4;
  --loops-accent-wash: #0C2320;
  --loops-accent-edge: #45DCC43D;
  --loops-accent-deep: #7BDCCB;
  --loops-miss: #E08877;
  --loops-partial: #D8B45E;
  --loops-scrim: #0A0A09D9;
}

/* A subtree that asks for light inside a dark document. */
[data-theme="light"] {
  color-scheme: light;
  --loops-canvas: #FAF9F6;
  --loops-surface: #FFFFFF;
  --loops-inset: #F2F0EB;
  --loops-rule: #E5E2DA;
  --loops-rule-2: #D2CEC4;
  --loops-ink: #0B0B0A;
  --loops-ink-hover: #2A2926;
  --loops-ink-2: #57554F;
  --loops-ink-3: #6E6C65;
  --loops-on-ink: #FAF9F6;
  --loops-accent: #0B7A6B;
  --loops-accent-wash: #E4F0ED;
  --loops-accent-edge: #0B7A6B33;
  --loops-accent-deep: #095F54;
  --loops-miss: #B3402F;
  --loops-partial: #8A6512;
  --loops-scrim: #FAF9F6D9;
}