/* ============================================================
   PIAF ALIGNMENT STUDIO — COLOUR SYSTEM
   "Spacious Minimal × Warm Tonal"
   Three families, each an 11-step OKLCH ramp (50 → 950).
   Anchors from brand photography land on exact stops (noted).
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1 · WARM SPINE — the backbone neutral.
     Sand anchors live in the light half, brown anchors in the
     dark half; hue drifts from warm-yellow (~85°) toward red
     (~30°) as it darkens, preserving the redness of the browns.
     Backgrounds, surfaces AND text all draw from this family.
     --------------------------------------------------------- */
  --spine-0:   #FAF8F4; /* Warm Porcelain — the sanctioned warm near-white for
                          elevated surfaces. NEVER use a cool near-white
                          (#FDFDFC) or pure #FFFFFF anywhere. */
  --spine-50:  #F5F2EC; /* ← Harbour Linen (v2.0 background) */
  --spine-100: #EDE9E1; /* ← Warm Stone (v2.0 surface) */
  --spine-200: #DDD7CC; /* ← Sand Dune (v2.0 surface deep) */
  --spine-300: #D9C6B0; /* ◆ ANCHOR — Warm Sand (light) */
  --spine-400: #C1A685; /* ◆ ANCHOR — Camel */
  --spine-500: #A07E65; /* generated mid — hue shifting to red */
  --spine-600: #7D5A4A;
  --spine-700: #5F3E34;
  --spine-800: #392927; /* ◆ ANCHOR — Espresso */
  --spine-900: #341D17; /* ◆ ANCHOR — deep warm brown */
  --spine-950: #1D1311; /* ◆ ANCHOR — near-black (reddest dark) */

  /* ---------------------------------------------------------
     2 · STONE — cooler greige neutral (hue ~90°, low chroma).
     Borders, dividers, secondary surfaces — keeps the UI from
     going monotone-brown.  Built around #BDBAB0.
     --------------------------------------------------------- */
  --stone-50:  #F6F5F1;
  --stone-100: #EDEBE5;
  --stone-200: #DDDBD3;
  --stone-300: #CDCAC1;
  --stone-400: #BDBAB0; /* ◆ ANCHOR — Creamy greige */
  --stone-500: #9B988F;
  --stone-600: #77746C;
  --stone-700: #58554E;
  --stone-800: #403D37;
  --stone-900: #2B2823;
  --stone-950: #1A1814;

  /* ---------------------------------------------------------
     3 · CLAY — the single accent. A DEEPER TERRACOTTA (hue ~33°),
     chosen by the studio over the original lighter clay. Depth
     comes from richer chroma + a redder hue, not darkness, so the
     primary button keeps dark espresso text at WCAG AA.
     (Supersedes the earlier anchors Blush #D9B9AE / Warm #B87E6A /
     Fired #8C5C4A — kept in git history if the lighter clay is wanted.)
     Hover LIFTS one step lighter (a warm glow) rather than darkening,
     because darkening a deep terracotta breaks dark-text contrast.
     --------------------------------------------------------- */
  --clay-50:   #F4EAE5;
  --clay-100:  #EAD3CA; /* gradient-accent tint (light) */
  --clay-200:  #DEB6A6;
  --clay-300:  #D99F8F; /* accent / accent-text (dark) */
  --clay-400:  #D38878; /* accent fill (dark) · hover (light) */
  --clay-500:  #CB7967; /* ◆ primary accent (light) — Deeper Terracotta */
  --clay-600:  #B16351;
  --clay-700:  #894736; /* accent-text (light) */
  --clay-800:  #6C3629;
  --clay-900:  #522921; /* accent-muted tint (dark) */
  --clay-950:  #381C17;
}

/* ============================================================
   SEMANTIC LAYER — one set of token names, two mode mappings.
   Use these in components, never the raw ramp stops.
   Every text-on-surface pairing below passes WCAG AA.
   ============================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  --background:      var(--spine-50);   /* linen canvas            */
  --surface:         var(--spine-100);  /* panels, bars            */
  --surface-raised:  var(--spine-0);    /* elevated cards, modals — Warm Porcelain #FAF8F4 */
  --surface-sunken:  var(--spine-200);  /* wells, inset fields     */

  --text:            var(--spine-900);  /* 14.1:1 on bg ✓          */
  --text-subtle:     var(--spine-700);  /* 7.8:1 on surface ✓      */
  --text-muted:      var(--spine-600);  /* 5.1:1 on surface ✓      */

  --accent:          var(--clay-500);   /* fills, deeper terracotta */
  --accent-hover:    var(--clay-400);   /* hover lifts lighter (glow) */
  --accent-muted:    var(--spine-200);  /* warm-sand tint — AA-safe under --accent-text (~4.9:1) */
  --accent-text:     var(--clay-700);   /* accent as link/text 5.0:1 ✓ */
  --on-accent:       var(--spine-900);  /* dark text on accent 4.7:1 ✓ */

  --border:          var(--stone-300);  /* soft hairline divider   */
  --border-strong:   var(--stone-500);  /* form controls           */
  --ring:            var(--clay-600);   /* focus ring              */
  --overlay:         rgba(29, 19, 17, 0.45); /* espresso scrim     */
}

[data-theme="dark"] {
  color-scheme: dark;

  --background:      var(--spine-950);  /* near-black warm brown   */
  --surface:         var(--spine-900);
  --surface-raised:  var(--spine-800);  /* espresso card           */
  --surface-sunken:  #150D0B;           /* deeper than bg          */

  --text:            var(--spine-50);   /* 14.1:1 on surface ✓     */
  --text-subtle:     var(--spine-300);  /* 9.5:1 on surface ✓      */
  --text-muted:      var(--spine-400);  /* 6.8:1 on surface ✓      */

  --accent:          var(--clay-400);   /* lifted so it reads dark */
  --accent-hover:    var(--clay-300);
  --accent-muted:    var(--clay-900);
  --accent-text:     var(--clay-300);   /* ~8:1 on bg ✓            */
  --on-accent:       var(--spine-950);  /* dark text on accent 7.5:1 ✓ */

  --border:          var(--stone-800);
  --border-strong:   var(--stone-600);
  --ring:            var(--clay-400);
  --overlay:         rgba(0, 0, 0, 0.60);
}