/* Sent in Stone — color tokens v1 (Slate & Clay)
   Built in OKLCH from Cairn (H 83°). Slate = complement (263°), Clay = analogous (43°).
   Contrast ratios are WCAG 2 vs --bg (#1b161b) unless noted. */
:root {
  /* Neutrals · H 326° */
  --bg-deep: #120e12;            /* Deepest layer: footer, sunken wells, code blocks, hairline divider on --bg */
  --bg: #1b161b;                 /* Page background */
  --surface: #231d22;            /* Cards, inputs, menus */
  --surface-raised: #2a242a;     /* Hover rows, popovers, raised cards */
  --border: #312c31;             /* Dividers and card edges only (1.3:1), not form controls */
  --border-strong: #4a434a;      /* Secondary button outline, emphasized dividers (1.9:1), not form controls */
  --border-input: #766f75;       /* Form control borders on dark: 3.7:1 on --bg, 3.4:1 on --surface (WCAG 1.4.11) */
  --text-placeholder: #766f75;   /* 3.7:1. Example hints and disabled text only, never instructions */
  --text-muted: #a39ca2;         /* 6.7:1. Secondary copy, captions, helper text */
  --text: #d9d0d6;               /* 11.8:1. Primary text, wordmark (Stone) */
  --light-surface: #f2edf1;      /* Optional light sections and HTML emails */
  --border-input-light: #857e85; /* Form control borders on --light-surface (3.4:1) */

  /* Cairn · brand · H 83° — primary CTA, logo, "in" of the wordmark */
  --cairn-100: #e3c792;          /* CTA hover; light tint */
  --cairn-300: #d9bd89;          /* Primary CTA fill, brand text on dark (9.8:1) */
  --cairn-500: #c2a774;          /* Pressed state; large text */
  --cairn-700: #634f2a;          /* Text on light (5.2:1 on #d9d0d6); CTA border on light surfaces */
  --cairn-900: #3a2f1f;          /* Tinted surface */

  /* Slate · interactive · H 263° — links, focus, selection, info */
  --slate-100: #cbd8f0;          /* Link hover; light tint */
  --slate-300: #9bb2db;          /* Links, focus ring, status text (8.3:1) */
  --slate-500: #778cb4;          /* Pressed state; large text */
  --slate-700: #435370;          /* Text/links on light (5.1:1 on #d9d0d6) */
  --slate-900: #242b3a;          /* Tinted surface; focus halo */

  /* Clay · secondary accent · H 43° — tags, "New", featured highlights */
  --clay-100: #edd1c5;           /* Light tint */
  --clay-300: #d6a490;           /* Tag text on dark (8.1:1) */
  --clay-500: #af806d;           /* Pressed state; large text */
  --clay-700: #6b493b;           /* Text on light (5.3:1 on #d9d0d6) */
  --clay-900: #382720;           /* Tag background */

  /* Semantic — always pair with an icon or label */
  --success: #8fbf98;            /* H 150°. 8.6:1 on --bg */
  --success-bg: #1e3022;         /* Success chip background */
  --warning: #edaa6e;            /* H 62°, C 0.11. 9.0:1 on --bg, 7.1:1 on --warning-bg. Never use Cairn for status */
  --warning-bg: #3a2716;         /* Warning chip background */
  --error: #e3928b;              /* H 25°, C 0.10. 7.4:1 on --bg */
  --error-bg: #442321;           /* Error chip background */
  --info: #9bb2db;               /* = --slate-300 */
  --info-bg: #242b3a;            /* = --slate-900 */

  /* Focus: 2px --slate-300 outline + 3px --slate-900 halo */
  --focus-ring: #9bb2db;
  --focus-halo: #242b3a;
}