/* ==========================================================================
   Handled — design tokens
   Decide once, reuse everywhere. Warm (brown-tinted) greys, terracotta
   primary, sage secondary. All text/surface pairs verified >= 4.5:1 in both
   themes; functional borders >= 3:1. Reference the ROLE layer in components,
   never the raw ramps — that is what makes the dark theme work.
   ========================================================================== */

:root {
  /* ---- Spacing: base 16, no two neighbours closer than ~25% ------------- */
  --space-1:   4px;  --space-2:   8px;  --space-3:  12px;  --space-4:  16px;
  --space-5:  24px;  --space-6:  32px;  --space-7:  48px;  --space-8:  64px;
  --space-9:  96px;  --space-10:128px;  --space-11:192px;  --space-12:256px;
  --space-13:384px;  --space-14:512px;  --space-15:640px;  --space-16:768px;

  /* ---- Type scale: px only, never em ----------------------------------- */
  --text-xs:  12px;  --text-sm:  14px;  --text-base:16px;  --text-lg:  18px;
  --text-xl:  20px;  --text-2xl: 24px;  --text-3xl: 30px;  --text-4xl: 36px;
  --text-5xl: 48px;  --text-6xl: 60px;  --text-7xl: 72px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;

  /* ---- Weight: two, nothing under 400 ---------------------------------- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   600;

  /* ---- Line-height: inversely proportional to size --------------------- */
  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;
  --measure: 34em;          /* 45-75 characters */

  /* ---- Warm greys. Almost all of the UI is grey. ----------------------- */
  --sand-50:  hsl(40, 59%, 98%);   /* page background — the cream */
  --sand-100: hsl(35, 46%, 92%);   /* tinted panels */
  --sand-200: hsl(33, 26%, 85%);   /* borders, dividers */
  --sand-300: hsl(30, 18%, 74%);   /* decorative only — 1.9:1, see --border-strong */
  --sand-350: hsl(30, 16%, 56%);   /* functional borders: 3.1:1 on white, 3.3:1 on cream.
                                      Measured, not estimated — the old --sand-300 was
                                      documented as clearing 3:1 and actually managed 1.9. */
  --sand-400: hsl(26, 10%, 60%);   /* DISABLED text only (2.9:1) */
  --sand-500: hsl(22, 10%, 49%);   /* 4.0:1 — large text only (>=24px / 18.66px bold) */
  --sand-600: hsl(19,  9%, 39%);   /* 5.7:1 — tertiary text */
  --sand-700: hsl(18, 11%, 30%);   /* 8.7:1 — secondary text */
  --sand-800: hsl(14, 12%, 22%);   /* 12.2:1 */
  --sand-900: hsl(0,  11%, 16%);   /* 14.3:1 — primary text */

  /* ---- Terracotta. 500 is the shade that works as a button fill. -------- */
  --clay-100: hsl(26, 70%, 94%);
  --clay-200: hsl(24, 68%, 87%);
  --clay-300: hsl(22, 62%, 76%);
  --clay-400: hsl(20, 56%, 62%);   /* the brand terracotta — decorative */
  --clay-500: hsl(18, 60%, 44%);   /* 4.9:1 with white text */
  --clay-600: hsl(16, 62%, 36%);
  --clay-700: hsl(15, 64%, 29%);
  --clay-800: hsl(14, 66%, 22%);   /* 8.9:1 on --clay-100 */
  --clay-900: hsl(12, 68%, 16%);

  /* ---- Sage, the secondary accent -------------------------------------- */
  --sage-100: hsl(150, 26%, 92%);
  --sage-200: hsl(150, 24%, 84%);
  --sage-300: hsl(150, 20%, 70%);
  --sage-400: hsl(149, 16%, 56%);  /* the brand sage — decorative */
  --sage-500: hsl(152, 28%, 32%);  /* 7.0:1 with white text */
  --sage-600: hsl(154, 32%, 25%);
  --sage-800: hsl(156, 38%, 16%);  /* text on --sage-100 */

  /* ---- Status accents: 100 tint / 500 fill / 800 text-on-tint ---------- */
  --red-100:    hsl(  6, 90%, 95%);
  --red-500:    hsl(  4, 66%, 43%);
  --red-800:    hsl(  4, 82%, 24%);
  --gold-100:   hsl( 44, 92%, 91%);
  --gold-500:   hsl( 38, 92%, 34%);
  --gold-800:   hsl( 34, 96%, 19%);

  /* ---- Elevation: choose by z-position, not by looks ------------------- */
  --shadow-1: 0 1px 3px   hsla(14, 30%, 10%, .10);
  --shadow-2: 0 4px 6px   hsla(14, 30%, 10%, .10);
  --shadow-3: 0 5px 15px  hsla(14, 30%, 10%, .12);
  --shadow-4: 0 10px 24px hsla(14, 30%, 10%, .14);
  --shadow-5: 0 15px 35px hsla(14, 30%, 10%, .18);

  /* ---- Radius: one personality, held throughout (cozy => generous) ----- */
  --radius-sm:   8px;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Opacity: a fixed set, not a slider ------------------------------ */
  --opacity-1: .05; --opacity-2: .1; --opacity-3: .2;
  --opacity-4: .4;  --opacity-5: .6; --opacity-6: .8;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --header-height: 68px;

  /* ---- Semantic roles — components reference THESE --------------------- */
  --surface:        var(--sand-50);
  --surface-raised: hsl(0, 0%, 100%);
  --surface-sunken: var(--sand-100);
  --surface-inverse:var(--sand-900);
  --border:         var(--sand-200);   /* decorative dividers */
  --border-strong:  var(--sand-350);   /* functional: inputs, checkboxes, focus.
                                          Must clear 3:1 (WCAG 1.4.11) against
                                          --surface-raised, the harder of the two. */
  --text-primary:   var(--sand-900);
  --text-secondary: var(--sand-700);
  --text-tertiary:  var(--sand-600);
  --text-disabled:  var(--sand-400);
  --text-inverse:   var(--sand-50);
  --action:         var(--clay-500);
  --action-hover:   var(--clay-600);
  --action-text:    hsl(0, 0%, 100%);
  --action-tint:    var(--clay-100);
  --action-on-tint: var(--clay-800);
  --accent:         var(--sage-500);
  --accent-tint:    var(--sage-100);
  --accent-on-tint: var(--sage-800);
  --focus-ring:     var(--clay-600);

  /* Chevron for <select>. The stroke colour is baked into the data URI, so
     this needs a per-theme value rather than currentColor. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b5f59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Dark theme. Not a mechanical inversion: surfaces stack upward in lightness,
   accents move to the light end of the ramps, text sits a shade dimmer. */
:root[data-theme="dark"] {
  --surface:        hsl(0, 12%, 11%);
  --surface-raised: hsl(0, 10%, 16%);
  --surface-sunken: hsl(0, 12%,  8%);
  --surface-inverse:var(--sand-100);
  --border:         hsl(10, 9%, 24%);
  --border-strong:  hsl(16, 8%, 46%);   /* 3.2:1 on raised — measured */
  --text-primary:   hsl(35, 30%, 94%);
  --text-secondary: hsl(33, 18%, 82%);
  --text-tertiary:  hsl(30, 12%, 68%);
  --text-disabled:  hsl(24, 8%,  45%);
  --text-inverse:   var(--sand-900);
  --action:         hsl(20, 60%, 66%);  /* light fill + dark text */
  --action-hover:   hsl(22, 66%, 74%);
  --action-text:    hsl(12, 40%, 12%);
  --action-tint:    hsl(16, 30%, 22%);
  --action-on-tint: hsl(24, 62%, 80%);
  --accent:         hsl(150, 24%, 64%);
  --accent-tint:    hsl(155, 20%, 19%);
  --accent-on-tint: hsl(150, 32%, 76%);
  --focus-ring:     hsl(22, 70%, 72%);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3a79f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --clay-100: hsl(16, 30%, 22%);
  --clay-800: hsl(24, 62%, 80%);
  --sage-100: hsl(155, 20%, 19%);
  --sage-800: hsl(150, 32%, 76%);
  --gold-100: hsl(36, 30%, 20%);
  --gold-800: hsl(44, 84%, 72%);
  --red-100:  hsl(6, 30%, 20%);
  --red-800:  hsl(6, 84%, 78%);

  /* Shadows do little work on dark surfaces; lightness carries depth. */
  --shadow-1: 0 1px 3px   hsla(0, 0%, 0%, .4);
  --shadow-2: 0 4px 6px   hsla(0, 0%, 0%, .4);
  --shadow-3: 0 5px 15px  hsla(0, 0%, 0%, .45);
  --shadow-4: 0 10px 24px hsla(0, 0%, 0%, .5);
  --shadow-5: 0 15px 35px hsla(0, 0%, 0%, .55);
}