/* 121.coffee design tokens — colors, spacing, typography, radius, shadow, motion */
:root {
  /* Base — coffee scale */
  --espresso-950: #201209;
  --espresso-900: #2A1B12;
  --espresso-800: #3C2A1D;
  --espresso-700: #503A2A;
  --coffee-600: #6F4E37;
  --caramel-500: #9C6B44;
  --caramel-300: #C89B6F;
  --crema-200: #EBDCC3;
  --crema-100: #F4EAD9;
  --paper-50: #FBF7EF;
  --white-warm: #FFFDF9;

  /* Base — warm neutrals */
  --neutral-900: #241A12;
  --neutral-800: #3A2E24;
  --neutral-700: #54463A;
  --neutral-600: #6E6052;
  --neutral-500: #8A7C6E;
  --neutral-400: #A99C8E;
  --neutral-300: #C9BEB1;
  --neutral-200: #E2D9CC;
  --neutral-100: #EFE8DC;
  --neutral-50: #F8F3EA;

  /* Base — vitality green (lifestyle medicine) */
  --green-900: #23402D;
  --green-700: #34573E;
  --green-600: #3E6B4C;
  --green-500: #4C7F5B;
  --green-200: #CFE0D0;
  --green-100: #E4EEE4;

  /* Base — terracotta (editorial accent) */
  --terracotta-700: #8A4B2F;
  --terracotta-600: #A85A36;
  --terracotta-500: #C26E44;
  --terracotta-100: #F4E2D5;

  /* Semantic — surfaces */
  --surface-page: var(--paper-50);
  --surface-card: var(--white-warm);
  --surface-sunken: var(--crema-100);
  --surface-inverse: var(--espresso-900);
  --surface-accent-soft: var(--green-100);

  /* Semantic — text */
  --text-body: var(--espresso-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--paper-50);
  --text-link: var(--terracotta-700);
  --text-link-hover: var(--espresso-800);
  --text-on-accent: var(--paper-50);

  /* Semantic — actions */
  --accent: var(--espresso-900);
  --accent-hover: var(--espresso-800);
  --accent-secondary: var(--green-600);
  --accent-secondary-hover: var(--green-700);

  /* Semantic — borders */
  --border-subtle: #E7DDCD;
  --border-strong: var(--neutral-300);
  --border-focus: var(--green-600);

  /* Semantic — status */
  --status-success: #3E7C4F;
  --status-success-soft: #E2EFE4;
  --status-warning: #B97F24;
  --status-warning-soft: #F7EBD3;
  --status-error: #A93F2B;
  --status-error-soft: #F6E0DA;
  --status-info: #46698C;
  --status-info-soft: #E1E9F0;

  /* Fonts */
  --font-display: 'Young Serif', 'Georgia', serif;
  --font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.01em;
  --tracking-caps: 0.08em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42, 27, 18, 0.06);
  --shadow-md: 0 2px 8px rgba(42, 27, 18, 0.08);
  --shadow-lg: 0 8px 24px rgba(42, 27, 18, 0.12);
  --shadow-focus: 0 0 0 3px rgba(62, 107, 76, 0.25);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration-color: color-mix(in oklab, var(--text-link) 40%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }