/* ============================================================
   Times20 — Color tokens
   A warm-monochrome system. Pure black & white anchor the brand;
   a refined WARM NEUTRAL accent palette (cream #EAE4DA, sand
   #D8CEC1 — from the brand book, §4.3) adds warmth, character and
   approachability to light surfaces while keeping the premium,
   executive feel. A cool graphite scale (seeded from the brand
   ground #38393C) supplies ink text and the dark accent mode.
   LIGHT is the native/default mode; dark is for accent sections.
   ============================================================ */

:root {
  /* ---- Absolute anchors ---- */
  --t20-black: #000000;
  --t20-white: #ffffff;

  /* ---- Graphite / neutral scale (cool, seeded from #38393C) ---- */
  --t20-graphite-1000: #050506;
  --t20-graphite-950:  #0e0f11; /* primary dark "ink" surface */
  --t20-graphite-900:  #161719;
  --t20-graphite-800:  #1f2123;
  --t20-graphite-700:  #2a2c2f;
  --t20-graphite-600:  #38393c; /* signature brand ground */
  --t20-graphite-500:  #4a4c50;
  --t20-graphite-400:  #6c6f74;
  --t20-graphite-300:  #989ba1;
  --t20-graphite-200:  #c4c7cc;
  --t20-graphite-150:  #d9dbdf;
  --t20-graphite-100:  #e7e8eb;
  --t20-graphite-50:   #f3f4f5;
  --t20-graphite-25:   #fafafb;

  /* ---- Warm neutral accent (brand book §4.3 — adds warmth) ---- */
  --t20-sand-50:   #f6f2ec; /* derived — lightest warm wash */
  --t20-sand-100:  #eae4da; /* SPEC — Warm Cream  (234,228,218) */
  --t20-sand-200:  #d8cec1; /* SPEC — Warm Sand   (216,206,193) */
  --t20-sand-300:  #c4b7a6; /* derived — deeper sand for borders/text */
  --t20-sand-400:  #a8997f; /* derived — warm muted text on cream */

  /* ---- Functional status (desaturated, used sparingly) ---- */
  --t20-positive:   #2f7d5b;
  --t20-positive-bg:#e7f1ec;
  --t20-caution:    #9a7b1f;
  --t20-caution-bg: #f6efda;
  --t20-critical:   #b23b34;
  --t20-critical-bg:#f7e7e6;
  --t20-info:       #3a5f8a;
  --t20-info-bg:    #e7edf4;

  /* ============================================================
     SEMANTIC ALIASES — light (default) theme
     ============================================================ */

  /* Surfaces — light & warm by default */
  --surface-page:      var(--t20-white);
  --surface-canvas:    var(--t20-sand-50);   /* warm app/page canvas */
  --surface-card:      var(--t20-white);
  --surface-sunken:    var(--t20-sand-100);  /* warm sunken / muted */
  --surface-raised:    var(--t20-white);
  --surface-warm:      var(--t20-sand-100);  /* warm section ground */
  --surface-warm-2:    var(--t20-sand-200);  /* deeper warm panel */
  --surface-inverse:   var(--t20-graphite-950);
  --surface-inverse-2: var(--t20-graphite-600);

  /* Text */
  --text-primary:    var(--t20-graphite-950);
  --text-secondary:  var(--t20-graphite-500);
  --text-tertiary:   var(--t20-graphite-400);
  --text-disabled:   var(--t20-graphite-300);
  --text-inverse:    var(--t20-white);
  --text-on-inverse-muted: var(--t20-graphite-300);

  /* Borders / hairlines */
  --border-subtle:  var(--t20-graphite-100);
  --border-default: var(--t20-graphite-150);
  --border-strong:  var(--t20-graphite-300);
  --border-warm:    var(--t20-sand-200);   /* hairline on warm grounds */
  --border-inverse: var(--t20-graphite-700);

  /* Interactive — primary action is solid ink */
  --action-primary-bg:        var(--t20-graphite-950);
  --action-primary-bg-hover:  var(--t20-black);
  --action-primary-bg-active: var(--t20-graphite-800);
  --action-primary-fg:        var(--t20-white);

  /* Interactive — secondary / outline */
  --action-secondary-bg:        var(--t20-white);
  --action-secondary-bg-hover:  var(--t20-graphite-50);
  --action-secondary-fg:        var(--t20-graphite-950);
  --action-secondary-border:    var(--t20-graphite-200);

  /* Interactive — ghost */
  --action-ghost-bg-hover: var(--t20-graphite-100);
  --action-ghost-fg:       var(--t20-graphite-950);

  /* Focus ring */
  --focus-ring: var(--t20-graphite-950);

  /* Status semantic */
  --status-positive: var(--t20-positive);
  --status-caution:  var(--t20-caution);
  --status-critical: var(--t20-critical);
  --status-info:     var(--t20-info);
}

/* ============================================================
   DARK THEME — accent mode (was the original native mode).
   Used for high-impact accent sections, not the default page.
   Graphite ground, white ink. Apply with [data-theme="dark"].
   ============================================================ */
[data-theme="dark"] {
  --surface-page:      var(--t20-graphite-950);
  --surface-canvas:    var(--t20-graphite-1000);
  --surface-card:      var(--t20-graphite-900);
  --surface-sunken:    var(--t20-graphite-1000);
  --surface-raised:    var(--t20-graphite-800);
  --surface-warm:      var(--t20-graphite-900);
  --surface-warm-2:    var(--t20-graphite-800);
  --surface-inverse:   var(--t20-white);
  --surface-inverse-2: var(--t20-graphite-100);

  --text-primary:    var(--t20-white);
  --text-secondary:  var(--t20-graphite-300);
  --text-tertiary:   var(--t20-graphite-400);
  --text-disabled:   var(--t20-graphite-500);
  --text-inverse:    var(--t20-graphite-950);
  --text-on-inverse-muted: var(--t20-graphite-500);

  --border-subtle:  var(--t20-graphite-800);
  --border-default: var(--t20-graphite-700);
  --border-strong:  var(--t20-graphite-500);
  --border-warm:    var(--t20-graphite-700);
  --border-inverse: var(--t20-graphite-200);

  --action-primary-bg:        var(--t20-white);
  --action-primary-bg-hover:  var(--t20-graphite-100);
  --action-primary-bg-active: var(--t20-graphite-200);
  --action-primary-fg:        var(--t20-graphite-950);

  --action-secondary-bg:        transparent;
  --action-secondary-bg-hover:  var(--t20-graphite-800);
  --action-secondary-fg:        var(--t20-white);
  --action-secondary-border:    var(--t20-graphite-600);

  --action-ghost-bg-hover: var(--t20-graphite-800);
  --action-ghost-fg:       var(--t20-white);

  --focus-ring: var(--t20-white);
}