/* ============================================================
   design-tokens.css — Design System Tokens (Shared)
   ─────────────────────────────────────────────────
   PURPOSE : Single source of truth for all CSS custom properties.
             Used by BOTH simulators (eye-simulator + visual-pathway).
   USAGE   : @import this file first before any other CSS.
   EDIT    : Change color values here to restyle the entire app.
   ============================================================ */

:root {
  /* ── Base surfaces ── */
  --bg:              #ffffff;
  --bg-grad-a:       #ffffff;
  --bg-grad-b:       #ffffff;
  --surface:         #ffffff;
  --surface-sunken:  #ffffff;

  /* ── Borders ── */
  --border:          #d7e0e2;
  --border-soft:     #e4ebec;

  /* ── Text ── */
  --text:            #16232b;
  --text-soft:       #4c6169;
  --text-faint:      #7d919a;

  /* ── Brand accent (teal) ── */
  --accent:          #0e7c86;
  --accent-strong:   #0a626b;
  --accent-tint:     #dcf0ef;

  /* ── Warning (amber-red) ── */
  --warn:            #b4552b;
  --warn-strong:     #93401d;
  --warn-tint:       #fbe9db;

  /* ── Note (blue) ── */
  --note:            #3a6ea8;
  --note-strong:     #2c5a82;
  --note-tint:       #e2ecf7;

  /* ── Eye anatomy colors ── */
  --sclera:          #fbfcfa;
  --sclera-shadow:   #e4e9e3;
  --vessel:          #c96a5f;
  --iris-a:          #7a5232;
  --iris-b:          #4f3420;
  --iris-ring:       #33210f;
  --pupil:           #14100c;
  --lid:             #1c2a30;
  --lash:            #223138;
  --brow:            #2c3d44;
  --lid-skin:        #cfc0ac;
  --lid-skin-shadow: #a89679;
  --limbal:          #1a0f06;
  --iris-crypt:      #2c1c0c;
  --iris-furrow:     #3d2814;
  --collarette:      #23150a;
  --caruncle:        #de8e79;
  --caruncle-dark:   #bf6a56;
  --brow-hair:       #1e2c31;
  --gloss:           #fff7e6;

  /* ── Penlight tool ── */
  --penlight-body:       #2b3a41;
  --penlight-body-light: #46595f;
  --penlight-beam:       #ffd873;

  /* ── Corneal light reflex (Hirschberg reflex) ──
     Kept separate from --gloss to allow independent tuning.
     Slightly cool/blue because real corneal reflections mirror
     ambient sky/ceiling light, not a neutral white point. */
  --catchlight-core:    #ffffff;
  --catchlight-tint:    #eaf5ff;
  --catchlight-ambient: #dcedff;

  /* ── UI utilities ── */
  --shadow-color: 220 30% 20%;
  --focus-ring:   #0e7c86;
}