/* ============================================================
   Loon Research — Color tokens
   Light-first. Cool neutrals + steel-blue primary + teal "water".
   Trust (blue) and water (teal) are the two brand hues.
   Chroma is kept restrained; this is an enterprise palette.
   ============================================================ */

:root {
  /* --- Brand blue (trust) : steel / true blue ramp --- */
  --blue-950: #071B30; /* deepest ink-navy, near-black */
  --blue-900: #0B2A4A; /* headline ink on light, navy surfaces */
  --blue-800: #103A63;
  --blue-700: #155E9C; /* PRIMARY brand blue */
  --blue-600: #1E6FB4;
  --blue-500: #2E86C7; /* bright accent */
  --blue-400: #5AA3D8;
  --blue-200: #B7D5EC;
  --blue-100: #DCEAF6;
  --blue-50:  #EEF4FA; /* tint fill */

  /* --- Water (teal / aqua) : secondary accent --- */
  --water-800: #0A4C5E;
  --water-600: #0E7C97; /* SECONDARY brand accent */
  --water-500: #1596B2;
  --water-400: #46B0C8;
  --water-200: #AEDCE7;
  --water-100: #D7EEF3;
  --water-50:  #ECF7FA;

  /* --- Cool neutrals --- */
  --ink:       #10243A; /* primary text — deep blue-charcoal */
  --slate-800: #1D2E40;
  --slate-700: #33475B; /* secondary text */
  --slate-600: #47596D;
  --slate-500: #5E7085; /* muted text */
  --slate-400: #8395A6;
  --slate-300: #AEBCCB; /* strong borders, disabled text */
  --slate-200: #D3DCE5; /* borders */
  --slate-100: #E7EDF3; /* hairlines, dividers */
  --line:      #E3EAF1; /* default hairline */

  --white:     #FFFFFF;
  --bg:        #F7FAFC; /* cool off-white page */
  --bg-alt:    #EDF3F8; /* alternate section band */
  --bg-navy:   #0B2A4A; /* dark inverse surface */

  /* --- Semantic status --- */
  --success:   #1E8E63;
  --success-bg:#E7F4EE;
  --warning:   #B7791F;
  --warning-bg:#FBF1DE;
  --danger:    #C0392B;
  --danger-bg: #F9E9E7;

  /* ============================================================
     Semantic aliases — reference these in components/UI
     ============================================================ */
  --text-primary:    var(--ink);
  --text-secondary:  var(--slate-700);
  --text-muted:      var(--slate-500);
  --text-inverse:    #EAF2F9;
  --text-inverse-muted: #9FB8CE;
  --text-accent:     var(--blue-700);

  --surface-page:    var(--bg);
  --surface-card:    var(--white);
  --surface-sunken:  var(--bg-alt);
  --surface-navy:    var(--bg-navy);
  --surface-tint:    var(--blue-50);

  --border-subtle:   var(--line);
  --border-default:  var(--slate-200);
  --border-strong:   var(--slate-300);
  --border-accent:   var(--blue-700);

  --accent:          var(--blue-700);
  --accent-hover:    var(--blue-800);
  --accent-bright:   var(--blue-500);
  /* Simplified to a blue-only system: the secondary accent is a brighter blue,
     not teal. (The teal "water" ramp remains defined for optional use.) */
  --accent-water:    var(--blue-500);
  --accent-water-hover: var(--blue-700);

  --focus-ring:      color-mix(in srgb, var(--blue-500) 55%, transparent);
}