/* ==========================================================================
   Barrett Ahern Design System: tokens.css  (GENERATED by build_tokens.py, do not hand-edit)
   One system: Paper neutrals + Polaris structure + British racing green accent + Vervaunt audit components.
   Themes: light | dark. Auto from OS; force with <html data-theme="light|dark">.
   Rule: components use tokens, never hex values.
   ========================================================================== */

:root {
  /* Type families */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (Polaris-sized body, editorial display) */
  --text-2xs: 11px;  --text-xs: 12px;  --text-sm: 13px;  --text-md: 14px;
  --text-lg: 16px;   --text-xl: 20px;  --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px;
  --lh-tight: 1.15;  --lh-snug: 1.3;   --lh-body: 1.55;

  /* Spacing: 4px grid, Polaris naming (space-100 = 4px) */
  --space-025: 1px; --space-050: 2px; --space-100: 4px; --space-150: 6px; --space-200: 8px;
  --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px;
  --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1600: 64px; --space-2000: 80px;

  /* Shape. Paper is flat and editorial: hairlines, small radii, no card shadow. */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --lift: 0px;
  --border-width: 1px;

  /* Layout */
  --wrap: 1160px; --wrap-narrow: 720px; --nav-height: 52px; --gutter: 16px;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  /* Control sizing (Polaris: 28 / 36 / 44) */
  --control-sm: 28px; --control-md: 36px; --control-lg: 44px;

  /* Z-index */
  --z-nav: 100; --z-popover: 200; --z-modal: 300; --z-toast: 400;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---- light (default) ---- */
:root {
  --bg-base: #FAFAF8;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F4F3EF;
  --bg-overlay: #EDECEA;
  --bg-invert: #1C1B19;
  --text-on-invert: #FAFAF8;
  --text-primary: #1C1B19;
  --text-secondary: #57534E;
  --text-muted: #6B6761;
  --border-subtle: rgba(28,27,25,.14);
  --border-faint: rgba(28,27,25,.07);
  --border-strong: #1C1B19;
  --selected: rgba(15,76,58,.09);
  --hover: rgba(28,27,25,.04);
  --focus: #0F4C3A;
  --accent: #0F4C3A;
  --accent-ink: #FAFAF8;
  --accent-text: #0F4C3A;
  --accent-2: #736046;
  --accent-on-invert: #94C3B4;
  --accent-on-invert-ink: #041F16;
  --action-bg: #1C1B19;
  --action-ink: #FAFAF8;
  --chart-quiet: #CFCBC3;
  --shadow-card: none;
  --shadow-hover: 0 1px 2px rgba(28,27,25,.06);
  --shadow-pop: 0 8px 24px -6px rgba(28,27,25,.18);
  --chart-ink: #1C1B19;
  --chart-accent: #0F4C3A;
  --status-success: #1F7A4C;
  --status-success-tint: #CBEBD3;
  --status-success-ink: #14513A;
  --status-success-text: #14513A;
  --status-warning: #EE9A12;
  --status-warning-tint: #FBD8AA;
  --status-warning-ink: #6A3A00;
  --status-warning-text: #6A3A00;
  --status-danger: #C8261E;
  --status-danger-tint: #F9D2D0;
  --status-danger-ink: #8A1C17;
  --status-danger-text: #8A1C17;
  --status-attention: #E2C200;
  --status-attention-tint: #F5E58F;
  --status-attention-ink: #544600;
  --status-attention-text: #544600;
  --status-info: #5E9FD6;
  --status-info-tint: #D3E5F6;
  --status-info-ink: #123F5E;
  --status-info-text: #123F5E;
  color-scheme: light;
}

/* ---- dark (OS) ---- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --bg-base: #1C1B19;
  --bg-raised: #242320;
  --bg-sunken: #161513;
  --bg-overlay: #2C2B28;
  --bg-invert: #F4F3EF;
  --text-on-invert: #1C1B19;
  --text-primary: #F4F3EF;
  --text-secondary: #BDB9B1;
  --text-muted: #A19D95;
  --border-subtle: rgba(255,255,255,.14);
  --border-faint: rgba(255,255,255,.07);
  --border-strong: #F4F3EF;
  --selected: rgba(98,163,144,.18);
  --hover: rgba(255,255,255,.05);
  --focus: #94C3B4;
  --accent: #62A390;
  --accent-ink: #1C1B19;
  --accent-text: #7FB8A4;
  --accent-2: #C4B091;
  --accent-on-invert: #0F4C3A;
  --accent-on-invert-ink: #F4F3EF;
  --action-bg: #F4F3EF;
  --action-ink: #1C1B19;
  --chart-quiet: #4A4843;
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-pop: 0 8px 24px -6px rgba(0,0,0,.6);
  --chart-ink: #F4F3EF;
  --chart-accent: #62A390;
  --status-success: #1F7A4C;
  --status-success-tint: #CBEBD3;
  --status-success-ink: #14513A;
  --status-success-text: #CBEBD3;
  --status-warning: #EE9A12;
  --status-warning-tint: #FBD8AA;
  --status-warning-ink: #6A3A00;
  --status-warning-text: #FBD8AA;
  --status-danger: #C8261E;
  --status-danger-tint: #F9D2D0;
  --status-danger-ink: #8A1C17;
  --status-danger-text: #F9D2D0;
  --status-attention: #E2C200;
  --status-attention-tint: #F5E58F;
  --status-attention-ink: #544600;
  --status-attention-text: #F5E58F;
  --status-info: #5E9FD6;
  --status-info-tint: #D3E5F6;
  --status-info-ink: #123F5E;
  --status-info-text: #D3E5F6;
  color-scheme: dark;
}
}

/* ---- dark (forced) ---- */
:root[data-theme="dark"] {
  --bg-base: #1C1B19;
  --bg-raised: #242320;
  --bg-sunken: #161513;
  --bg-overlay: #2C2B28;
  --bg-invert: #F4F3EF;
  --text-on-invert: #1C1B19;
  --text-primary: #F4F3EF;
  --text-secondary: #BDB9B1;
  --text-muted: #A19D95;
  --border-subtle: rgba(255,255,255,.14);
  --border-faint: rgba(255,255,255,.07);
  --border-strong: #F4F3EF;
  --selected: rgba(98,163,144,.18);
  --hover: rgba(255,255,255,.05);
  --focus: #94C3B4;
  --accent: #62A390;
  --accent-ink: #1C1B19;
  --accent-text: #7FB8A4;
  --accent-2: #C4B091;
  --accent-on-invert: #0F4C3A;
  --accent-on-invert-ink: #F4F3EF;
  --action-bg: #F4F3EF;
  --action-ink: #1C1B19;
  --chart-quiet: #4A4843;
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-pop: 0 8px 24px -6px rgba(0,0,0,.6);
  --chart-ink: #F4F3EF;
  --chart-accent: #62A390;
  --status-success: #1F7A4C;
  --status-success-tint: #CBEBD3;
  --status-success-ink: #14513A;
  --status-success-text: #CBEBD3;
  --status-warning: #EE9A12;
  --status-warning-tint: #FBD8AA;
  --status-warning-ink: #6A3A00;
  --status-warning-text: #FBD8AA;
  --status-danger: #C8261E;
  --status-danger-tint: #F9D2D0;
  --status-danger-ink: #8A1C17;
  --status-danger-text: #F9D2D0;
  --status-attention: #E2C200;
  --status-attention-tint: #F5E58F;
  --status-attention-ink: #544600;
  --status-attention-text: #F5E58F;
  --status-info: #5E9FD6;
  --status-info-tint: #D3E5F6;
  --status-info-ink: #123F5E;
  --status-info-text: #D3E5F6;
  color-scheme: dark;
}

/* ---- Compatibility aliases: lets the existing barrettahern.com stylesheet run on these tokens ---- */
:root {
  --color-bg: var(--bg-base); --color-off-white: var(--bg-sunken); --color-paper: var(--bg-overlay);
  --color-rule: var(--border-subtle); --color-muted: var(--text-muted); --color-mid: var(--text-secondary);
  --color-ink: var(--text-primary); --color-text: var(--text-primary); --color-text-muted: var(--text-secondary);
  --color-border: var(--border-subtle); --color-card-bg: var(--bg-sunken);
  --color-accent-warm: var(--accent-text); --color-accent-cool: var(--accent-2);
}