/* Sage & Dusty Purple — CSS custom properties
   Generated from tokens.json. Fonts: Playfair Display, Source Sans 3, IBM Plex Mono. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Source+Sans+3:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {

  /* color */
  --color-paper-base: #F9F7F0; /* Page background. Warm off-white. */
  --color-paper-raised: #FFFDF8; /* Cards and panels sitting on paper.base. */
  --color-paper-sunken: #EFEBE0; /* Recessed bands, table headers. */
  --color-ink-strong: #23261F; /* Headlines, primary text. */
  --color-ink-body: #4F5449; /* Body copy. 8.0:1 on paper.base. */
  --color-ink-muted: #6B6F62; /* Captions, metadata. 4.9:1 on paper.base. */
  --color-line-subtle: #E6E2D6; /* Default hairline rule. */
  --color-line-strong: #C3BFB2; /* Emphasised border, input outline. */
  --color-sage-50: #F1F4EC;
  --color-sage-100: #E9EEE2; /* Tinted surface, stable/positive chips. */
  --color-sage-300: #B4C2A9;
  --color-sage-500: #6E7F63; /* Accent marks, icons, chart fill. */
  --color-sage-700: #3C4A3A; /* Primary action, structural dark. 8.6:1 on paper.base. */
  --color-sage-900: #2A3327;
  --color-purple-50: #F5F1F8;
  --color-purple-100: #EEE8F2; /* Quote band, secondary button fill. */
  --color-purple-300: #B9AEC4; /* Secondary button border. */
  --color-purple-500: #8A7A96; /* Numerals, eyebrow labels. */
  --color-purple-700: #5C4F66; /* Secondary action text, emphasis in headlines. 6.9:1 on paper.base. */
  --color-purple-900: #3B3245; /* Text on purple.100. */

  /* role */
  --role-surface-page: var(--color-paper-base);
  --role-surface-card: var(--color-paper-raised);
  --role-surface-quiet: var(--color-paper-sunken);
  --role-surface-accent: var(--color-sage-100);
  --role-surface-emphasis: var(--color-purple-100);
  --role-text-heading: var(--color-ink-strong);
  --role-text-body: var(--color-ink-body);
  --role-text-muted: var(--color-ink-muted);
  --role-text-emphasis: var(--color-purple-700);
  --role-text-on-dark: var(--color-paper-base);
  --role-border-default: var(--color-line-subtle);
  --role-border-strong: var(--color-line-strong);
  --role-action-primary-bg: var(--color-sage-700);
  --role-action-primary-text: var(--color-paper-base);
  --role-action-secondary-bg: var(--color-purple-100);
  --role-action-secondary-border: var(--color-purple-300);
  --role-action-secondary-text: var(--color-purple-700);
  --role-focus-ring: var(--color-purple-500);
  --role-status-stable-bg: var(--color-sage-100);
  --role-status-stable-text: var(--color-sage-700);
  --role-status-change-bg: var(--color-purple-100);
  --role-status-change-text: var(--color-purple-700);

  /* font */
  --font-family-display: 'Playfair Display', Georgia, serif; /* Headings, pull quotes. */
  --font-family-body: 'Source Sans 3', system-ui, sans-serif; /* Body copy, UI. */
  --font-family-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Labels, dates, versions, code. */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-3xs: 11px;
  --font-size-2xs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 36px;
  --font-size-5xl: 60px;
  --font-lineheight-tight: 1.03;
  --font-lineheight-snug: 1.35;
  --font-lineheight-normal: 1.5;
  --font-lineheight-relaxed: 1.55;
  --font-letterspacing-tightest: -0.015em;
  --font-letterspacing-tight: -0.01em;
  --font-letterspacing-wide: 0.08em;
  --font-letterspacing-widest: 0.12em;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 44px;
  --space-8: 64px;

  /* border */
  --border-hairline: 1px;

  /* radius */
  --radius-none: 0px;
  --radius-sm: 2px;
}

body {
  background: var(--role-surface-page);
  color: var(--role-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  line-height: var(--font-lineheight-normal);
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  color: var(--role-text-heading);
  letter-spacing: var(--font-letterspacing-tight);
}

a { color: var(--role-text-emphasis); text-decoration-color: var(--color-purple-300); }
a:hover { color: var(--color-purple-900); text-decoration-color: var(--color-purple-700); }

:focus-visible { outline: 2px solid var(--role-focus-ring); outline-offset: 2px; }