/* Tab & Kit — Color tokens
   Editorial premium minimalist · warm · Mexican.
   Light/warm grounds, espresso ink, a single disciplined accent: terracotta. */

:root {
  /* ---- Warm grounds (backgrounds & surfaces) ---- */
  --tk-cream-50:  #FBF8F2;   /* lightest, near-white warm */
  --tk-cream-100: #F7F1E7;   /* page background — bone/cream */
  --tk-cream-200: #F0E7D8;   /* sand panels */
  --tk-cream-300: #E7DAC6;   /* deeper sand / dividers on cream */
  --tk-cream-400: #D9C8AF;   /* muted toast */

  /* ---- Espresso ink (warm near-blacks & text) ---- */
  --tk-espresso-900: #241B12;  /* darkest — deep roast */
  --tk-espresso-800: #2E2519;  /* primary ink */
  --tk-espresso-700: #3D3122;  /* strong text on cream */
  --tk-espresso-500: #6B5C49;  /* secondary text / muted */
  --tk-espresso-300: #9C8E78;  /* tertiary, captions, placeholder */
  --tk-espresso-200: #C2B6A1;  /* hairline on white */

  /* ---- Terracotta (the single accent) ---- */
  --tk-terracotta-700: #9C4E32;  /* pressed / deep */
  --tk-terracotta-600: #B45C3C;  /* hover */
  --tk-terracotta-500: #C46A47;  /* accent base */
  --tk-terracotta-300: #E0A98E;  /* soft accent */
  --tk-terracotta-100: #F2DACB;  /* accent wash / tint surface */
  --tk-terracotta-050: #F8EAE0;  /* faintest accent wash */

  /* ---- Pure / utility ---- */
  --tk-white: #FFFFFF;
  --tk-black: #1A130C;

  /* ---- Semantic status (kept muted & warm) ---- */
  --tk-success: #5E7A52;   /* sage — in stock / confirmed */
  --tk-success-tint: #E6ECDF;
  --tk-warning: #C08A2E;   /* amber — low stock */
  --tk-warning-tint: #F5E9CF;
  --tk-danger:  #A8462F;   /* clay-red — error */
  --tk-danger-tint: #F2DBD2;

  /* ===========================================================
     Semantic aliases — reference these in components, not the raw scale
     =========================================================== */

  /* Surfaces */
  --surface-page:    var(--tk-cream-100);
  --surface-raised:  var(--tk-cream-50);
  --surface-card:    var(--tk-white);
  --surface-sand:    var(--tk-cream-200);
  --surface-ink:     var(--tk-espresso-800);   /* dark sections / footer */
  --surface-accent:  var(--tk-terracotta-500);
  --surface-accent-wash: var(--tk-terracotta-050);

  /* Text */
  --text-strong:   var(--tk-espresso-800);
  --text-body:     var(--tk-espresso-700);
  --text-muted:    var(--tk-espresso-500);
  --text-subtle:   var(--tk-espresso-300);
  --text-on-ink:   var(--tk-cream-100);
  --text-on-accent:var(--tk-white);
  --text-accent:   var(--tk-terracotta-600);

  /* Lines & borders */
  --border-hairline: rgba(46, 37, 25, 0.10);
  --border-soft:     rgba(46, 37, 25, 0.14);
  --border-strong:   rgba(46, 37, 25, 0.26);
  --border-accent:   var(--tk-terracotta-500);
  --border-on-ink:   rgba(247, 241, 231, 0.16);

  /* Accent interaction */
  --accent:        var(--tk-terracotta-500);
  --accent-hover:  var(--tk-terracotta-600);
  --accent-press:  var(--tk-terracotta-700);

  /* Focus ring */
  --focus-ring: rgba(196, 106, 71, 0.45);

  /* Liquid-glass tints (used by buttons & overlays) */
  --glass-tint-light:  rgba(255, 255, 255, 0.55);
  --glass-tint-cream:  rgba(247, 241, 231, 0.62);
  --glass-tint-ink:    rgba(36, 27, 18, 0.30);
  --glass-edge:        rgba(255, 255, 255, 0.70);
  --glass-shade:       rgba(46, 37, 25, 0.12);
}