/* Frid Digital — design tokens.
 *
 * GENERATED from brand/tokens.json by brand/build-tokens.js. Do not edit.
 * Copy this file into a project and link it; it needs no build step and no
 * dependencies. Dark theme follows the system by default, and an explicit
 * [data-theme] on the root element overrides it in either direction.
 */

:root {
  --surface: #f6f3ec;
  --surface-raised: #fffdf8;
  --surface-sunken: #efeade;
  --ink: #171717;
  --ink-muted: #4e4941;
  --ink-faint: #6b665f;
  --accent: #b0562f;
  --accent-ink: #a54e28;
  --accent-soft: #f0e3d9;
  --rule: #e2dacb;
  --rule-strong: #877f71;
  --focus: var(--accent-ink);
  --brand-charcoal: #171717;
  --brand-ivory: #f4f0e8;
  --brand-copper: #c87343;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #171717;
    --surface-raised: #201d16;
    --surface-sunken: #100f0b;
    --ink: #f4f0e8;
    --ink-muted: #c6bfb2;
    --ink-faint: #9a9386;
    --accent: #d9784a;
    --accent-ink: #e08a5c;
    --accent-soft: #38241a;
    --rule: #302b22;
    --rule-strong: #82796b;
    --focus: var(--accent-ink);
    --brand-charcoal: #171717;
    --brand-ivory: #f4f0e8;
    --brand-copper: #c87343;
  }
}

:root[data-theme="dark"] {
  --surface: #171717;
  --surface-raised: #201d16;
  --surface-sunken: #100f0b;
  --ink: #f4f0e8;
  --ink-muted: #c6bfb2;
  --ink-faint: #9a9386;
  --accent: #d9784a;
  --accent-ink: #e08a5c;
  --accent-soft: #38241a;
  --rule: #302b22;
  --rule-strong: #82796b;
  --focus: var(--accent-ink);
  --brand-charcoal: #171717;
  --brand-ivory: #f4f0e8;
  --brand-copper: #c87343;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --measure-prose: 62ch;
  --measure-page: 1080px;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.display-xl { font-family: var(--font-sans); font-size: 56px; line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; }
.display { font-family: var(--font-sans); font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
.heading { font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.subheading { font-family: var(--font-sans); font-size: 19px; line-height: 1.35; font-weight: 600; }
.body-lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.16em; }