/* ============================================================
   PROTEAN — COLOR TOKENS
   Anchored, restricted palette. Deep petroleum teal is the
   spine; a warm off-white gives it room; graphite carries text;
   a single discreet aqua is the only accent. Cold, deep tones —
   the aquatic root of the name.
   ============================================================ */

:root {
  /* ---- Petroleum teal scale (anchor + accent live here) ---- */
  --teal-950: #081A1F;
  --teal-900: #0F2B31; /* brand anchor */
  --teal-800: #163A42;
  --teal-700: #1C4A54;
  --teal-600: #226069;
  --teal-500: #2E8C8C; /* accent */
  --teal-400: #4FA6A2;
  --teal-300: #86C3BE;
  --teal-200: #BCDDD9;
  --teal-100: #E1EFEC;
  --teal-50:  #F0F7F5;

  /* ---- Warm neutral / graphite scale ---- */
  --ink-950: #131315;
  --ink-900: #1C1C1E; /* graphite — primary text */
  --ink-800: #2A2A2C;
  --ink-700: #3A3A3D;
  --ink-600: #55544F;
  --ink-500: #6B6A64;
  --ink-400: #8E8C85;
  --ink-300: #B6B2A9;
  --ink-200: #D7D2C8;
  --ink-150: #E2DDD3;
  --ink-100: #E9E5DC;
  --ink-50:  #F4F1EC; /* warm off-white */

  --paper: #FBFAF7;
  --white: #FFFFFF;

  /* ---- Muted semantic status ---- */
  --green-600: #2F7D5B;
  --green-100: #E3F0E9;
  --amber-600: #A9772A;
  --amber-100: #F3EAD6;
  --red-600:   #A83A3A;
  --red-100:   #F1E1DE;

  /* ---- Gradients (support, never protagonist) ---- */
  --grad-deep:   linear-gradient(160deg, #0F2B31 0%, #0B2227 100%); /* @kind other */
  --grad-accent: linear-gradient(160deg, #163A42 0%, #0F2B31 70%);  /* @kind other */
  --grad-veil:   linear-gradient(180deg, rgba(15,43,49,0) 0%, rgba(15,43,49,0.55) 100%); /* @kind other */

  /* ---- Semantic aliases ---- */
  --brand: var(--teal-900);
  --brand-strong: var(--teal-950);
  --accent: var(--teal-500);
  --accent-quiet: var(--teal-600);

  --surface-canvas:  var(--ink-50);
  --surface-card:    var(--paper);
  --surface-raised:  var(--white);
  --surface-inverse: var(--teal-900);
  --surface-sunken:  var(--ink-100);

  --text-strong: var(--ink-900);
  --text-body:   var(--ink-800);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-400);
  --text-on-brand: #EAF3F1;
  --text-on-brand-muted: #9FC0BC;
  --text-link: var(--teal-600);

  --border-strong: var(--ink-300);
  --border:        var(--ink-200);
  --border-soft:   var(--ink-150);
  --border-on-brand: rgba(255,255,255,0.14);

  --focus-ring: rgba(46,140,140,0.45);
}