/* ============================================================
   Chus Sanz &Co. — Color tokens
   ------------------------------------------------------------
   Brand colours (supplied by the client):
     · Navy   #111B2C  — primary dark (ink): surfaces, headlines
     · Gold   #C9A048  — primary warm accent: rules, marks,
                         highlights, gold-on-navy moments
     · Brick  #B7412E  — occasional accent: interactive emphasis
                         and accent text on cream
   On a clean neutral (stone) paper. Legibility rule of thumb:
     – on STONE, accent text → BRICK (gold is too light for small text)
     – on NAVY,  accent text → GOLD  (premium, high-contrast)
   ============================================================ */

:root {
  /* ---- Navy / ink ramp (primary dark) ---- */
  --ink-900: #0A121C;
  --ink-800: #111B2C;   /* ★ brand navy — primary dark */
  --ink-700: #1C2A3A;
  --ink-600: #2C3D4E;
  --ink-500: #44586A;   /* muted ink text on cream */
  --ink-400: #647889;
  --ink-300: #93A2AE;

  /* ---- Stone / neutral scale — clean, light, cool-neutral stone grey
         (fully replaces the old warm cream paper — no beige/cream) ---- */
  --stone-050: #FAFBFB;
  --stone-100: #F2F3F4;  /* default page paper — light stone grey */
  --stone-200: #E7E9EB;  /* cards, panels */
  --stone-300: #D7DADD;  /* hairline borders */
  --stone-400: #BDC1C5;  /* stronger borders */
  --stone-500: #82868C;  /* muted captions */

  /* Back-compat aliases: old --cream-* / --sand-* now resolve to the neutral stone ramp */
  --cream-050: var(--stone-050);
  --cream-100: var(--stone-100);
  --cream-200: var(--stone-200);
  --cream-300: var(--stone-300);
  --cream-400: var(--stone-400);
  --sand-500:  var(--stone-500);

  --white: #FFFFFF;

  /* ---- Gold (primary warm accent) ---- */
  --gold-700: #8C6C2A;
  --gold-600: #A9842F;   /* darker / pressed */
  --gold-500: #C9A048;   /* ★ brand gold */
  --gold-300: #DCC07F;
  --gold-200: #EFE3C3;   /* tint background */

  /* ---- Brick (occasional accent) ---- */
  --brick-600: #93311F;  /* pressed */
  --brick-500: #B7412E;  /* ★ brand brick */
  --brick-200: #EBD3CC;  /* tint background */

  /* ---- Back-compat aliases (older refs to "clay") → brick ---- */
  --clay-600: var(--brick-600);
  --clay-500: var(--brick-500);
  --clay-200: var(--brick-200);

  /* ---- Semantic feedback (quiet, brand-aligned) ---- */
  --positive: #3E6B53;
  --positive-tint: #DCE7DE;
  --caution: var(--gold-600);
  --caution-tint: #ECE2C6;
  --critical: var(--brick-500);
  --critical-tint: #ECD3CF;

  /* ============================================================
     Semantic aliases — reach for THESE in components
     ============================================================ */
  /* Surfaces */
  --surface-page:    var(--stone-100);
  --surface-paper:   var(--stone-050);
  --surface-card:    var(--white);
  --surface-panel:   var(--stone-200);
  --surface-ink:     var(--ink-800);
  --surface-ink-deep:var(--ink-900);
  --surface-accent:  var(--gold-500);   /* gold feature sections (use navy text) */
  --surface-emphasis:var(--brick-500);  /* brick emphasis sections (use white text) */

  /* Text */
  --text-strong:   var(--ink-800);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-caption:  var(--stone-500);
  --text-on-ink:        rgba(255,255,255,0.92);
  --text-on-ink-muted:  rgba(255,255,255,0.62);
  --text-on-ink-faint:  rgba(255,255,255,0.40);
  --text-accent:        var(--brick-500);   /* accent text on cream */
  --text-accent-on-ink: var(--gold-500);    /* accent text on navy */

  /* Lines & decorative rules */
  --border-hair:   var(--stone-300);
  --border-strong: var(--stone-400);
  --border-ink:    var(--ink-800);
  --border-on-ink: rgba(255,255,255,0.16);
  --rule-accent:   var(--gold-500);    /* gold structural rules / marks */

  /* Interactive */
  --action-primary:        var(--ink-800);
  --action-primary-hover:  var(--ink-700);
  --action-primary-press:  var(--ink-900);
  --action-accent:         var(--brick-500);
  --action-accent-hover:   var(--brick-600);

  /* Focus */
  --focus-ring: var(--brick-500);
}