@layer reset, base, components, utilities;

:root {
  /* --- Ink (neutrals — shared across all clients) --- */
  --ink-950:     #141714;
  --ink-800:     #2B302A;
  --ink-600:     #4D5549;
  --ink-400:     #8A9485;
  --ink-200:     #C8D1C3;
  --ink-100:     #E4EBE0;
  --ink-50:      #F0F4EE;
  --paper:       #FAFAF7;

  /* --- Forest (primary accent — client-overridable) --- */
  --forest-900:  #162B22;
  --forest-700:  #2A5240;
  --forest-500:  #3E7A5C;
  --forest-300:  #82B89F;
  --forest-100:  #CBE8DA;
  --forest-50:   #E9F5EE;

  /* --- Amber (CTA / highlights — client-overridable) --- */
  --amber-700:   #97601E;
  --amber-500:   #C4843A;
  --amber-300:   #E2B074;
  --amber-100:   #F6E2C4;
  --amber-50:    #FDF5E8;

  /* --- Semantic (shared, do not override) --- */
  --danger-600:  #A32828;
  --danger-500:  #C0392B;
  --danger-50:   #FDEDEB;
  --success-600: #216A3E;
  --success-500: #27894C;
  --success-50:  #EBF7F1;
  --warning-500: #A8741A;
  --warning-50:  #FDF6E3;

  /* --- Semantic aliases --- */
  --color-bg:          var(--paper);
  --color-surface:     #FFFFFF;
  --color-surface-alt: var(--ink-50);
  --color-border:      var(--ink-100);
  --color-border-mid:  var(--ink-200);
  --color-text:        var(--ink-800);
  --color-text-muted:  var(--ink-600);
  --color-text-subtle: var(--ink-400);
  --color-accent:      var(--forest-700);
  --color-accent-dark: var(--forest-900);
  --color-cta:         var(--amber-500);
  --color-cta-dark:    var(--amber-700);
  --color-focus:       var(--forest-300);

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* --- Spacing scale (4px base) --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* --- Border radius --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(20,23,20,.06);
  --shadow-sm: 0 1px 4px rgba(20,23,20,.08), 0 1px 2px rgba(20,23,20,.04);
  --shadow-md: 0 4px 16px rgba(20,23,20,.10), 0 1px 4px rgba(20,23,20,.06);
  --shadow-lg: 0 12px 40px rgba(20,23,20,.14), 0 2px 8px rgba(20,23,20,.08);

  /* --- Transitions --- */
  --transition: 150ms ease;
  --transition-md: 250ms ease;
}