/* ============================================================
   Opto Alignment — Color Tokens
   Primary: cobalt blue #20449A · Accent: magenta #ED018C
   Sampled directly from the brand logo.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --brand-blue: #20449A;          /* primary — logo oval */
  --brand-magenta: #ED018C;       /* accent — the "i" dot */
  --brand-white: #FFFFFF;

  /* ---- Blue scale (cobalt) ---- */
  --blue-50:  #EEF2FB;
  --blue-100: #D7E0F4;
  --blue-200: #AEC0E8;
  --blue-300: #809ADA;
  --blue-400: #4F6FC4;
  --blue-500: #20449A;            /* base brand blue */
  --blue-600: #1C3C8A;
  --blue-700: #18336F;            /* hover / pressed */
  --blue-800: #122655;
  --blue-900: #0D1B3D;            /* deep ink, dark surfaces */
  --blue-950: #081026;

  /* ---- Magenta scale (accent) ---- */
  --magenta-50:  #FDE6F3;
  --magenta-100: #FBC2E1;
  --magenta-300: #F45CB2;
  --magenta-500: #ED018C;         /* base accent */
  --magenta-600: #C70077;
  --magenta-700: #9E005E;

  /* ---- Measurement cyan (data / instrumentation accent) ---- */
  --cyan-100: #D2F1F7;
  --cyan-400: #34B7D1;
  --cyan-500: #0E97B5;
  --cyan-700: #0A6F87;

  /* ---- Neutrals (cool, faint blue cast) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFD;
  --gray-50:  #F4F6FA;
  --gray-100: #E9EDF3;
  --gray-200: #D8DEE9;
  --gray-300: #BDC6D6;
  --gray-400: #97A2B6;
  --gray-500: #6C7689;
  --gray-600: #4E5667;
  --gray-700: #383F4D;
  --gray-800: #262C37;
  --gray-900: #161A22;

  /* ---- Semantic status ---- */
  --green-100: #DCF4E6;
  --green-500: #168F52;          /* in-tolerance / pass */
  --green-700: #0F6B3D;
  --amber-100: #FCEFCF;
  --amber-500: #C68A0B;          /* caution */
  --amber-700: #95680A;
  --red-100:   #FBE0DE;
  --red-500:   #C9342B;          /* out-of-tolerance / fail */
  --red-700:   #98231C;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Text */
  --text-strong:   var(--blue-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-600);   /* darkened for readability (was gray-500) */
  --text-subtle:   var(--gray-500);   /* darkened for readability (was gray-400) */
  --text-on-brand: var(--brand-white);
  --text-link:     var(--brand-blue);
  --text-link-hover: var(--blue-700);

  /* Surfaces */
  --surface-page:    var(--gray-25);
  --surface-card:    var(--gray-0);
  --surface-sunken:  var(--gray-50);
  --surface-raised:  var(--gray-0);
  --surface-inverse: var(--blue-900);
  --surface-brand:   var(--brand-blue);
  --surface-brand-subtle: var(--blue-50);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--brand-blue);
  --border-focus:   var(--blue-400);

  /* Interactive (primary action) */
  --action-bg:        var(--brand-blue);
  --action-bg-hover:  var(--blue-600);
  --action-bg-active: var(--blue-700);
  --action-fg:        var(--brand-white);

  /* Accent action */
  --accent-bg:        var(--brand-magenta);
  --accent-bg-hover:  var(--magenta-600);
  --accent-bg-active: var(--magenta-700);
  --accent-fg:        var(--brand-white);

  /* Status semantic */
  --status-pass-fg: var(--green-700);
  --status-pass-bg: var(--green-100);
  --status-warn-fg: var(--amber-700);
  --status-warn-bg: var(--amber-100);
  --status-fail-fg: var(--red-700);
  --status-fail-bg: var(--red-100);
  --status-info-fg: var(--blue-700);
  --status-info-bg: var(--blue-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(79, 111, 196, 0.45);
}