/* ===========================================================================
   HydroTeam: Color
   ---------------------------------------------------------------------------
   Sampled directly from the brand logos. Three signal colors stacked like the
   mark: orange (heat / combustion), blue (engineering / primary), sky (water /
   hydrogen). Neutrals are tuned cool toward the blue. A derived deep navy adds
   depth for presentation backgrounds.
   =========================================================================== */

:root {
  /* ---- Brand core (from the logo) ---- */
  --ht-orange: #DB5827;   /* heat, combustion, the accent. Use sparingly. */
  --ht-blue:   #03508F;   /* primary brand blue, the wordmark color */
  --ht-sky:    #55BEEC;   /* hydrogen / water, light accent */
  --ht-white:  #FFFFFF;

  /* ---- Orange ramp ---- */
  --orange-50:  #FCEDE6;
  --orange-100: #F7D2C0;
  --orange-300: #EC8E62;
  --orange-500: #DB5827;  /* base */
  --orange-600: #C2491C;
  --orange-700: #9C3914;

  /* ---- Blue ramp (primary) ---- */
  --blue-50:  #E6EFF6;
  --blue-100: #C2D8EA;
  --blue-300: #5C8FBE;
  --blue-500: #03508F;    /* base */
  --blue-600: #033F71;
  --blue-700: #022E52;
  --blue-900: #021E37;    /* deep navy, presentation backdrop */

  /* ---- Sky ramp ---- */
  --sky-50:  #EAF7FD;
  --sky-100: #CCEBFA;
  --sky-300: #8FD5F2;
  --sky-500: #55BEEC;     /* base */
  --sky-600: #2AA3D8;
  --sky-700: #1878A3;     /* readable sky: 4.52 on --sky-50, 4.94 on white */

  /* ---- Sand / beige ramp (the deck's warm background) ---- */
  --sand-50:  #FCFBF7;
  --sand-100: #F8F7F2;    /* primary background, the team's deck bg */
  --sand-200: #ECEAE0;
  --sand-300: #D9D5C4;

  /* ---- Cool neutral ramp ---- */
  --ink-900: #0B1620;     /* near-black, cool */
  --ink-800: #16252F;
  --ink-700: #243744;
  --ink-600: #3C515F;
  --ink-550: #4E6270;     /* muted text: 5.92 on sand, 6.35 on white */
  --ink-500: #5C707D;     /* faint text: 4.81 on sand, 5.16 on white */
  --ink-450: #7A8E9B;     /* control strokes: 3.17 on sand, 3.40 on white */
  --ink-400: #8497A2;     /* decorative only - too light to carry text */
  --ink-300: #AEBDC6;
  --ink-200: #D2DCE2;
  --ink-100: #E8EEF2;
  --ink-50:  #F4F7F9;

  /* ---- Semantic feedback ---- */
  /* Each family is three values, not one: a FILL white can be printed on, an
     INK for the family's words on light, and the TINT those words sit on. */
  --success:      #157A55;   /* white on it 5.32; the dot and the fill (words on light take --success-ink) */
  --success-ink:  #0E6D4A;   /* the approved word on its tint (5.53) */
  --success-tint: #E2F3EC;   /* the approved badge's fill */
  --warning:      #E8A317;
  --danger:       #D2412B;   /* white on it 4.63 - the solid Reject fill */
  --danger-ink:   #B4321F;   /* danger words and strokes on light (5.02 on tint) */
  --danger-tint:  #FBE3E0;   /* rejected badge, danger-outline hover, PDF error strip */
  --info:         var(--sky-700);

  /* =========================================================================
     SEMANTIC ALIASES, prefer these in components / layouts
     ========================================================================= */

  /* Surfaces */
  --surface-page:    var(--sand-100);   /* warm beige, the brand's default light surface */
  --surface-sand:    var(--sand-100);
  --surface-card:    var(--ht-white);
  --surface-sunken:  var(--sand-200);
  --surface-inverse: var(--blue-900);   /* dark presentation backdrop */
  --surface-brand:   var(--blue-500);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-550);
  --text-faint:    var(--ink-500);
  --text-on-dark:  var(--ht-white);
  --text-on-brand: var(--ht-white);
  --text-link:     var(--ht-blue);

  /* Accent intents */
  --accent-primary: var(--ht-blue);
  --accent-heat:    var(--ht-orange);
  --accent-hydro:   var(--ht-sky);

  /* Lines / borders */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);   /* rules and dividers, not control strokes */
  --border-control: var(--ink-450);  /* inputs, selects, seg, switch, ghost buttons */
  --border-brand:  var(--ht-blue);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Scrims — the deep navy (--blue-900, rgb 2 30 55) seen through something.
     The Navy Through Glass Rule: the only dark surface in the system is this
     navy, and it is always a gradient over the water photograph or one of
     these translucent veils. Never a flat panel colour. */
  --scrim-modal:  rgba(2, 30, 55, .62);   /* behind a modal / full-screen sheet */
  --scrim-drawer: rgba(2, 30, 55, .45);   /* behind the phone nav drawer */
  --scrim-edge:   rgba(2, 30, 55, .16);   /* the scroll shadow at a scroller's edge */

  /* Focus ring */
  --focus-ring: var(--sky-500);
}