/* Gridline Studio — Color tokens
 * The brand is fundamentally two colors: warm Cream + near-black Ink.
 * Everything else is a warm neutral ramp interpolated between them, plus a
 * restrained set of muted functional states. Monochrome & editorial by design.
 */
:root {
  /* ---- Brand primitives ---- */
  --gl-cream: #FFFCF3;
  --gl-ink:   #08070C;

  /* ---- Warm neutral ramp (paper → ink) ---- */
  --gl-paper-0: #FFFCF3;
  --gl-paper-1: #F7F2E6;
  --gl-sand-2:  #ECE5D5;
  --gl-sand-3:  #DBD2BE;
  --gl-stone-4: #B6AD9B;
  --gl-stone-5: #837B6E;
  --gl-slate-6: #565049;
  --gl-slate-7: #322F2B;
  --gl-ink-8:   #17161B;
  --gl-ink-9:   #08070C;

  /* ---- Muted functional states (earthy, low-chroma) ---- */
  --gl-positive: #3E7A5E;
  --gl-positive-surface: #E4EEE6;
  --gl-caution:  #B07A2B;
  --gl-caution-surface:  #F4E9D4;
  --gl-critical: #A8443B;
  --gl-critical-surface: #F3E0DD;
  --gl-info:     #3C5A82;
  --gl-info-surface:     #E1E8F1;

  /* ---- Semantic surfaces ---- */
  --surface-page:     var(--gl-paper-0);
  --surface-sunken:   var(--gl-paper-1);
  --surface-card:     var(--gl-cream);
  --surface-raised:   #FFFFFF;
  --surface-inverse:  var(--gl-ink-9);
  --surface-inverse-raised: var(--gl-ink-8);

  /* ---- Semantic text ---- */
  --text-primary:   var(--gl-ink-9);
  --text-secondary: var(--gl-slate-6);
  --text-muted:     var(--gl-stone-5);
  --text-faint:     var(--gl-stone-4);
  --text-inverse:   var(--gl-cream);
  --text-inverse-secondary: rgba(255, 252, 243, 0.68);

  /* ---- Semantic borders ---- */
  --border-subtle:  rgba(8, 7, 12, 0.08);
  --border-default: rgba(8, 7, 12, 0.16);
  --border-strong:  rgba(8, 7, 12, 0.32);
  --border-ink:     var(--gl-ink-9);
  --border-inverse: rgba(255, 252, 243, 0.20);

  /* ---- Interactive ---- */
  --interactive:        var(--gl-ink-9);
  --interactive-hover:  var(--gl-slate-7);
  --interactive-inverse: var(--gl-cream);
  --focus-ring:         rgba(8, 7, 12, 0.55);
}