/* Firmatic AI design system v2.0 — refined C1, approved September 22, 2026.
   Keep values in sync with tokens.json. See DESIGN.md for surface rules.
   Figtree and IBM Plex Mono are bundled locally with their OFL notices. */

/* ── Colour ── */
:root {
  --pine-600: #25483d;
  --surface-workflow: #edf3ee;
  --border-workflow: #d8e4db;
  --width-marketing-rail: 184px;
  --height-marketing-header: 96px;
  --gutter-marketing-inline: 56px;
  --height-marketing-control: 48px;
  --size-marketing-body: 18px;
  --size-marketing-ui: 16px;
  --size-marketing-label: 14px;
  --size-marketing-mobile-body: 17px;
  --leading-marketing-body: 1.7;
  --leading-marketing-mobile-body: 1.75;

  --green-50: #eef4f1;
  --green-100: #d8e7df;
  --green-200: #b4cfc2;
  --green-300: #8ab3a1;
  --green-400: #5c8d79;
  --green-500: #3f6e5c;
  --green-600: #315c50;
  --green-700: #27493f;
  --green-800: #1c352e;
  --green-900: #13241f;
  --sage-100: #eaf3e3;
  --sage-200: #d4e8c7;
  --sage-300: #b8d9a7;
  --sage-400: #9bc486;
  --sage-500: #7ba766;
  --copper-100: #f7ebe2;
  --copper-200: #ebd0bc;
  --copper-300: #d6a57f;
  --copper-400: #be8054;
  --copper-500: #9c5f3c;
  --copper-600: #7e4b2f;
  --neutral-0: #ffffff;
  --neutral-25: #f0f3f0;
  --neutral-50: #f5f7f5;
  --neutral-100: #e8ede9;
  --neutral-200: #d8e0da;
  --neutral-300: #bec9c1;
  --neutral-400: #9ca79f;
  --neutral-500: #737f76;
  --neutral-600: #56655d;
  --neutral-700: #405249;
  --neutral-800: #34453e;
  --neutral-900: #20312b;
  --clay-500: #a4483a;
  --clay-100: #f6e4e0;
  --amber-500: #8a6a1f;
  --amber-600: #7b5e1c;
  --amber-100: #f6eed8;
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-600);
  --text-on-dark: var(--neutral-25);
  --text-on-dark-muted: var(--green-200);
  --text-link: var(--pine-600);
  --text-link-hover: var(--green-800);
  --text-accent: var(--copper-500);
  --surface-page: var(--neutral-25);
  --surface-rail: var(--neutral-25);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-inset: var(--neutral-100);
  --surface-dark: var(--green-800);
  --surface-brand: var(--pine-600);
  --surface-accent-soft: var(--surface-workflow);
  --surface-selected: #e3ebe5;
  --surface-hover: var(--green-50);
  --border-hairline: var(--neutral-200);
  --border-strong: #7a8b80;
  --border-brand: var(--green-600);
  --border-accent: var(--sage-200);
  --border-on-dark: rgba(255,255,255,.16);
  --action-primary-bg: var(--pine-600);
  --action-primary-bg-hover: var(--green-700);
  --action-primary-bg-active: var(--green-800);
  --action-primary-fg: var(--neutral-0);
  --action-secondary-bg: var(--neutral-0);
  --action-secondary-bg-hover: var(--neutral-50);
  --action-secondary-fg: var(--neutral-800);
  --action-ghost-fg: var(--green-700);
  --action-disabled-bg: var(--neutral-100);
  --action-disabled-fg: var(--neutral-400);
  --focus-ring: var(--green-600);
  --status-ready-fg: var(--neutral-600);
  --status-ready-bg: var(--neutral-100);
  --status-active-fg: var(--green-700);
  --status-active-bg: var(--green-100);
  --status-input-fg: var(--amber-600);
  --status-input-bg: var(--amber-100);
  --status-review-fg: var(--copper-600);
  --status-review-bg: var(--copper-100);
  --status-blocked-fg: var(--clay-500);
  --status-blocked-bg: var(--clay-100);
  --status-later-fg: var(--neutral-600);
  --status-later-bg: var(--neutral-50);
  --status-done-fg: var(--green-600);
  --status-done-bg: var(--sage-200);
  --label-established: var(--green-700);
  --label-hypothesis: var(--copper-500);
  --label-proposed: var(--amber-500);
  --label-open: var(--amber-600);
  --label-superseded: var(--neutral-600);
  --priority-p0: var(--copper-600);
  --priority-p0-fg: var(--copper-600);
  --priority-p0-bg: var(--copper-100);
  --priority-p1: var(--green-700);
  --priority-p1-fg: var(--green-700);
  --priority-p1-bg: var(--green-50);
  --priority-p2: var(--neutral-600);
  --priority-p2-fg: var(--neutral-600);
  --priority-p2-bg: var(--neutral-100);
  --scrim-overlay: rgba(19,36,31,.34);
}

/* ── Spacing and layout ── */
:root {
  --space-0: 0;
  --space-025: 3px;
  --space-05: 4px;
  --space-075: 6px;
  --space-1: 8px;
  --space-15: 12px;
  --space-2: 16px;
  --space-25: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --gutter-card: 24px;
  --gutter-card-tight: 16px;
  --gutter-section: 64px;
  --gutter-section-lg: 96px;
  --border-width-hairline: 1px;
  --border-width-strong: 1.5px;
  --border-width-rule: 2px;
  --width-content: 960px;
  --width-content-narrow: 650px;
  --width-content-app: 1550px;
  --width-sidebar: 234px;
  --width-panel: 420px;
  --height-topbar: 73px;
  --height-control: 40px;
  --height-control-sm: 28px;
  --height-control-lg: 44px;
  --min-touch: 44px;
}

/* ── Radii ── */
:root {
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --radius-mark: 23.4%;
}

/* ── Elevation ── */
:root {
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-sm: 0 1px 2px rgba(26,27,25,.05);
  --shadow-card: 0 1px 2px rgba(26,27,25,.04),0 1px 1px rgba(26,27,25,.03);
  --shadow-raised: 0 4px 12px -2px rgba(26,27,25,.08),0 1px 2px rgba(26,27,25,.04);
  --shadow-overlay: 0 24px 56px -12px rgba(19,36,31,.28),0 2px 6px rgba(26,27,25,.06);
  --shadow-toast: 0 4px 12px -2px rgba(26,27,25,.15),0 1px 2px rgba(26,27,25,.06);
  --shadow-inset-input: inset 0 1px 1px rgba(26,27,25,.04);
  --ring-focus: 0 0 0 2px #315c50;
}

/* ── Motion ── */
:root {
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(.2,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

/* ── Organizer font sizes ── */
:root {
  --size-page-title: 30px;
  --size-focus-title: 26px;
  --size-section-title: 18px;
  --size-body: 14px;
  --size-ui: 13px;
  --size-caption: 12px;
  --size-label: 11px;
}

/* ── Leading ── */
:root {
  --leading-display: 1.16;
  --leading-title: 1.25;
  --leading-tight: 1.35;
  --leading-body: 1.6;
}

/* ── Weights ── */
:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

/* ── Tracking ── */
:root {
  --tracking-display: -0.035em;
  --tracking-title: -0.02em;
  --tracking-mono-id: 0.015em;
}

/* ── Other ── */
:root {
  --text-display-1: clamp(34px,4.2vw,46px);
  --text-display-2: clamp(28px,3.2vw,34px);
  --text-display-3: clamp(24px,2.4vw,26px);
  --stack-tight: 8px;
  --stack-default: 16px;
  --stack-loose: 32px;
  --inline-default: 8px;
  --border-hairline-style: 1px solid var(--border-hairline);
  --border-strong-style: 1px solid var(--border-strong);
  --rule-accent: 2px solid #B8D9A7;
  --ring-selected: inset 2px 0 0 #315C50;
  --blur-overlay: saturate(120%) blur(2px);
  --transition-control: background-color 120ms cubic-bezier(0,0,.2,1),border-color 120ms cubic-bezier(0,0,.2,1),color 120ms cubic-bezier(0,0,.2,1),box-shadow 120ms cubic-bezier(0,0,.2,1);
  --transition-surface: box-shadow 180ms cubic-bezier(0,0,.2,1),transform 180ms cubic-bezier(0,0,.2,1);
  --press-scale: 0.994;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-toast: 200;
}

/* ── Font families ── */
:root {
  --font-display: var(--font-sans);
  --font-sans: "Figtree",Arial,Helvetica,sans-serif;
  --font-mono: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── Type roles: organizer (default) ──
   Components set text with these shorthands. The organizer's compact scale is the
   default; add data-surface="marketing" on <html> or any container for the roomier
   website and document scale. */
:root{
  --text-title-1:28px;
  --text-title-2:22px;
  --text-title-3:18px;
  --text-body-lg:17px;
  --text-body-sm:13.5px;
  --text-caption:12.5px;
  --text-label:11.5px;
  --tracking-body:0;
  --tracking-label:0.08em;
  --measure-prose:66ch;
  --measure-narrow:48ch;

  --type-hero:var(--weight-semibold) var(--text-display-1)/var(--leading-display) var(--font-display);
  --type-section:var(--weight-semibold) var(--text-display-3)/var(--leading-title) var(--font-display);
  --type-page-title:var(--weight-semibold) var(--size-page-title)/1.25 var(--font-sans);
  --type-card-title:var(--weight-semibold) var(--size-section-title)/1.25 var(--font-sans);
  --type-body-lg:var(--weight-regular) var(--text-body-lg)/1.58 var(--font-sans);
  --type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-sans);
  --type-ui:var(--weight-medium) var(--size-ui)/1.4 var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--size-label)/1.2 var(--font-mono);
  --type-id:var(--weight-medium) var(--size-caption)/1.2 var(--font-mono);
}

/* ── Type roles: marketing and client documents ── */
[data-surface="marketing"]{
  --type-page-title:var(--weight-semibold) var(--text-title-1)/var(--leading-title) var(--font-sans);
  --type-card-title:var(--weight-semibold) var(--text-title-3)/var(--leading-title) var(--font-sans);
  --type-body-lg:var(--weight-regular) var(--size-marketing-body)/var(--leading-marketing-body) var(--font-sans);
  --type-body:var(--weight-regular) var(--size-marketing-body)/var(--leading-marketing-body) var(--font-sans);
  --type-ui:var(--weight-medium) var(--size-marketing-ui)/1.5 var(--font-sans);
  --type-eyebrow:var(--weight-medium) var(--size-marketing-label)/1.5 var(--font-sans);
  --type-id:var(--weight-medium) var(--size-marketing-label)/1.5 var(--font-mono);
}

/* ── Focus: a 2px solid forest outline, 4px offset, on every interactive element ── */
:where(a,button,[role="button"],[role="tab"],summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:4px;
}
:where(input,select,textarea):focus-visible{outline-offset:2px}

/* ── Motion primitives. The only continuous animation in the system. ── */
@keyframes firmatic-spin{to{transform:rotate(360deg)}}
@keyframes firmatic-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}