/* Studio EMKÈ — Color tokens
   Warm, earthy, classy but down-to-earth. Charcoal ink + terracotta accent
   over a range of warm clay neutrals on cream paper. */
:root {
  /* ── Base: warm clay neutral ramp (cream → ink) ── */
  --clay-50:  #F7F3EC;  /* lightest paper tint */
  --clay-100: #F0E9DC;
  --clay-200: #E4D9C6;
  --clay-300: #D2C3AB;
  --clay-400: #B8A78C;
  --clay-500: #9A8970;
  --clay-600: #766A58;
  --clay-700: #574E42;
  --clay-800: #34302A;
  --clay-900: #1A1A18;  /* ink — from logo */

  /* ── Primary: rust (deepened from the logo's terracotta stroke) ──
     Token names kept as --terracotta-* for compatibility; values are the
     deeper "rust" ramp the brand now uses. */
  --terracotta-100: #F4E1D6;
  --terracotta-200: #E3B7A0;
  --terracotta-300: #D38A63;
  --terracotta-400: #BC633C;
  --terracotta-500: #A23B17;  /* base — deep rust */
  --terracotta-600: #84300F;
  --terracotta-700: #5E230B;

  /* Friendly aliases for the rust ramp */
  --rust-100: var(--terracotta-100);
  --rust-300: var(--terracotta-300);
  --rust-500: var(--terracotta-500);
  --rust-600: var(--terracotta-600);
  --rust-700: var(--terracotta-700);

  /* ── Secondary earthy accents ── */
  --ochre-400:  #D9A24B;
  --ochre-500:  #C4862E;  /* warm gold */
  --ochre-600:  #A36C20;
  --olive-400:  #8C9068;
  --olive-500:  #6E7350;  /* muted sage */
  --olive-600:  #555A3C;
  --teal-500:   #4E6B6B;  /* muted stone-teal */

  /* ── Paper / surface base ── */
  --paper:      #F5F1EA;  /* primary cream background */
  --paper-warm: #EFE8DC;
  --white:      #FFFFFF;

  /* ── Semantic aliases ── */
  --bg-page:        var(--paper);
  --bg-page-alt:    var(--paper-warm);
  --surface-card:   var(--white);
  --surface-sunken: var(--clay-100);
  --surface-ink:    var(--clay-900);

  --text-strong:    var(--clay-900);
  --text-body:      var(--clay-800);
  --text-muted:     var(--clay-600);
  --text-faint:     var(--clay-500);
  --text-on-ink:    var(--paper);
  --text-on-accent: #FBF1EA;

  --accent:         var(--terracotta-500);
  --accent-hover:   var(--terracotta-600);
  --accent-press:   var(--terracotta-700);
  --accent-soft:    var(--terracotta-100);

  --border-subtle:  var(--clay-200);
  --border-default: var(--clay-300);
  --border-strong:  var(--clay-400);
  --border-ink:     var(--clay-900);

  --focus-ring:     var(--terracotta-400);

  --success: var(--olive-500);
  --warning: var(--ochre-500);
  --danger:  var(--terracotta-700);
  --info:    var(--teal-500);
}
