/* ============================================================
   myMedCrew · Color System
   "Navy leads. Teal earns its moment."
   Specify color by TOKEN, never by eye. 60/30/10 proportion:
   ~60% navy+cloud, ~30% warm neutral, ≤10% teal (action only).
   ============================================================ */

:root {
  /* ---- Core brand --------------------------------------- */
  --navy:            #0B3D5C; /* Deep Navy · primary, the foundation */
  --navy-deep:       #072A3F; /* Navy Deep · backgrounds & shadow depth */
  --teal:            #1A9E75; /* Medical Teal · the single accent */
  --teal-deep:       #147A5A; /* Teal Deep · teal text on light (AA 4.6:1) */
  --cloud:           #F5F9FF; /* primary light surface */

  /* ---- Neutrals · text, borders, warm surfaces ---------- */
  --ink:             #0E1719; /* near-black text */
  --slate:           #6E7A82; /* secondary text, neutral badges */
  --sand-3:          #D9D7CE; /* warm border / divider */
  --sand-2:          #E3E1D8; /* warm surface */
  --sand-1:          #ECEBE4; /* lightest warm surface */
  --white:           #FFFFFF;

  /* ---- Navy tint scale (UI states, layering) ------------ */
  --navy-100:        #0B3D5C;
  --navy-80:         #3C647D;
  --navy-60:         #6D8B9D;
  --navy-40:         #9DB1BE;
  --navy-20:         #CED8DE;
  --navy-8:          #EBEFF2;

  /* ---- Teal tint scale ---------------------------------- */
  --teal-120:        #147A5A;
  --teal-100:        #1A9E75;
  --teal-60:         #76C5AC;
  --teal-30:         #BAE2D6;
  --teal-12:         #E4F3EE; /* focus ring / soft success fill */

  /* ========================================================
     Semantic aliases — reference THESE in product code
     ======================================================== */

  /* Surfaces */
  --surface-page:      var(--cloud);     /* default app/page background */
  --surface-card:      var(--white);     /* cards, panels */
  --surface-sunken:    var(--sand-1);    /* wells, insets, alt rows */
  --surface-warm:      var(--sand-2);    /* warm section blocks */
  --surface-inverse:   var(--navy);      /* navy heroes, dark sections */
  --surface-inverse-deep: var(--navy-deep);

  /* Text */
  --text-primary:      var(--ink);       /* body & headings on light */
  --text-secondary:    var(--slate);     /* captions, meta */
  --text-accent:       var(--teal-deep); /* emphasis on light */
  --text-on-navy:      var(--cloud);     /* primary text on navy (AAA 11.8) */
  --text-on-navy-dim:  var(--navy-40);   /* secondary text on navy */
  --text-on-teal:      var(--white);     /* large text on teal only */

  /* Borders & lines */
  --border:            var(--sand-3);    /* default warm divider */
  --border-cool:       var(--navy-20);   /* cool divider on light */
  --border-strong:     var(--navy);      /* emphasized outline */
  --border-width:      1.5px;            /* brand input/border weight */

  /* Action */
  --action:            var(--navy);      /* default action (most buttons) */
  --action-hover:      var(--navy-deep);
  --action-primary:    var(--teal);      /* primary conversion — ONE per view */
  --action-primary-hover: var(--teal-deep);
  --focus-ring:        var(--teal-12);   /* 12% teal focus tint */
  --focus-ring-line:   var(--teal);

  /* Status */
  --success:           var(--teal);      /* "placed", positive, active */
  --success-soft:      var(--teal-12);
  --neutral-status:    var(--slate);     /* "in vetting", neutral pills */

  /* Shadow color base (navy-tinted, never pure black) */
  --shadow-color:      11 61 92;         /* rgb channels of navy for rgba() */
}