/* ============================================================
   VSI · COLORS
   Warm, editorial palette anchored by VSI orange on cream paper.
   Base scales first, semantic aliases after.
   ============================================================ */
:root {
  /* --- VSI Orange (brand primary) --- */
  --orange-50:  #FEF6F1;
  --orange-100: #FCE7DA;
  --orange-200: #F8C9AE;
  --orange-300: #F4A77F;
  --orange-400: #F07F4F;
  --orange-500: #ED5B2D;   /* core brand orange */
  --orange-600: #D2481E;   /* hover */
  --orange-700: #AE3917;   /* press / deep */
  --orange-800: #842B12;

  /* --- Warm Ink (neutrals, slightly warm gray) --- */
  --ink-900: #17120E;   /* near-black, headings on light */
  --ink-800: #2A231D;
  --ink-700: #423A32;
  --ink-600: #5E544A;
  --ink-500: #7C7164;   /* muted body */
  --ink-400: #A99E90;
  --ink-300: #CDC4B7;
  --ink-200: #E6DFD3;
  --ink-100: #F1EBE0;
  --ink-50:  #FAF6F0;   /* cream paper */
  --white:   #FFFFFF;

  /* --- Support accents (used sparingly) --- */
  --highlight: #FFD27A;   /* marker / "cut through the noise" */
  --teal-600:  #1F6F6B;   /* rare cool counterpoint */

  /* --- Semantic status --- */
  --success-500: #2E8B5B;
  --warning-500: #E0A100;
  --danger-500:  #C8391C;
  --info-500:    #2D6CA3;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  /* Surfaces */
  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--orange-500);
  --surface-brand-soft: var(--orange-50);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-brand: var(--white);
  --text-on-dark:  var(--ink-50);
  --text-brand:    var(--orange-600);

  /* Lines & borders */
  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-900);
  --border-brand:  var(--orange-500);

  /* Interaction */
  --action-bg:        var(--orange-500);
  --action-bg-hover:  var(--orange-600);
  --action-bg-press:  var(--orange-700);
  --focus-ring:       var(--orange-500);
}