/* brand/tokens.css -- GENERATED by brand/build-tokens.mjs from brand/tokens.js. Do not hand-edit. */
/* Living Websites brand kit, semantic tokens. Light is the default; dark via [data-theme="dark"] or the OS preference when [data-theme="auto"]. */
/* Breakpoints (CSS custom properties cannot be used in media queries, so they are documented here): sm 600px, md 720px, lg 1024px, xl 1280px. */
:root {
  color-scheme: light;
  --color-primary: #2F6B4F;
  --color-primary-hover: #24523D;
  --color-on-primary: #F6F7F4;
  --color-secondary: #B8853A;
  --color-bg: #F6F7F4;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #1B231D;
  --color-text-soft: #2E3830;
  --color-text-muted: #5B6A5F;
  --color-border: #DCD9D0;
  --color-border-strong: #928F87;
  --color-link: #2F6B4F;
  --color-focus: #2F6B4F;
  --color-success: #2F6B4F;
  --color-success-soft: #DEF5E8;
  --color-warning: #926108;
  --color-warning-soft: #FBECD9;
  --color-error: #993A31;
  --color-error-soft: #FFE8E5;
  --shadow-raised: 0 1px 2px rgb(27 35 29 / 0.06), 0 8px 24px rgb(27 35 29 / 0.08);
  --shadow-overlay: 0 2px 6px rgb(27 35 29 / 0.10), 0 24px 64px rgb(27 35 29 / 0.18);
  --font-display: "Bricolage Grotesque",system-ui,sans-serif;
  --font-body: "Hanken Grotesk",system-ui,sans-serif;
  --font-mono: "IBM Plex Mono",monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --measure: 65ch;
  --text-display: clamp(2.369rem, 1.4rem + 3.2vw, 4.209rem);
  --leading-display: 1.05;
  --tracking-display: -0.02em;
  --text-h1: clamp(1.777rem, 1.2rem + 2vw, 3.157rem);
  --leading-h1: 1.1;
  --tracking-h1: -0.015em;
  --text-h2: clamp(1.5rem, 1.1rem + 1.2vw, 2.369rem);
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --text-h3: clamp(1.2rem, 1rem + 0.7vw, 1.777rem);
  --leading-h3: 1.2;
  --tracking-h3: 0;
  --text-h4: clamp(1.05rem, 0.95rem + 0.35vw, 1.333rem);
  --leading-h4: 1.25;
  --tracking-h4: 0;
  --text-body: 1rem;
  --leading-body: 1.65;
  --tracking-body: 0;
  --text-small: 0.889rem;
  --leading-small: 1.55;
  --tracking-small: 0;
  --text-label: 0.75rem;
  --leading-label: 1.2;
  --tracking-label: 0.14em;
  --text-caption: 0.778rem;
  --leading-caption: 1.45;
  --tracking-caption: 0;
  --text-figure: 1rem;
  --leading-figure: 1.4;
  --tracking-figure: 0;
  --leading-body-mobile: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container: 1160px;
  --container-prose: 760px;
  --grid-columns: 12;
  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-tablet: 24px;
  --margin-desktop: 40px;
  --radius-xs: 3px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-medium: 280ms;
  --duration-slow: 480ms;
  --ease-standard: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-travel: 8px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-ring: 2px solid var(--color-focus);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #559072;
  --color-primary-hover: #6AA687;
  --color-on-primary: #07090C;
  --color-secondary: #B8853A;
  --color-bg: #07090C;
  --color-surface: #0E1418;
  --color-surface-raised: #171D21;
  --color-text: #EAF2F0;
  --color-text-soft: #D2DBDE;
  --color-text-muted: #9FB2B0;
  --color-border: #16211F;
  --color-border-strong: #5D6A67;
  --color-link: #559072;
  --color-focus: #559072;
  --color-success: #538F71;
  --color-success-soft: #062014;
  --color-warning: #B8853A;
  --color-warning-soft: #261704;
  --color-error: #C86458;
  --color-error-soft: #2B1310;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px rgb(0 0 0 / 0.45);
  --shadow-overlay: 0 2px 6px rgb(0 0 0 / 0.50), 0 24px 64px rgb(0 0 0 / 0.65);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --color-primary: #559072;
    --color-primary-hover: #6AA687;
    --color-on-primary: #07090C;
    --color-secondary: #B8853A;
    --color-bg: #07090C;
    --color-surface: #0E1418;
    --color-surface-raised: #171D21;
    --color-text: #EAF2F0;
    --color-text-soft: #D2DBDE;
    --color-text-muted: #9FB2B0;
    --color-border: #16211F;
    --color-border-strong: #5D6A67;
    --color-link: #559072;
    --color-focus: #559072;
    --color-success: #538F71;
    --color-success-soft: #062014;
    --color-warning: #B8853A;
    --color-warning-soft: #261704;
    --color-error: #C86458;
    --color-error-soft: #2B1310;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-overlay: 0 2px 6px rgb(0 0 0 / 0.50), 0 24px 64px rgb(0 0 0 / 0.65);
  }
}

@media (max-width: 600px) {
  :root { --leading-body: var(--leading-body-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
    --motion-travel: 0px;
  }
}