/* ============================================================
   Managio — Color tokens
   Primary is the Managio/Switch IT indigo-blue (the "M" logo).
   Scale is the exact Mantine `switchitColor` tuple from theme.tsx.
   Mint-green is the secondary accent (hero CTA, callouts).
   Navy is the dark surface used on the hero & login art.
   ============================================================ */

:root {
  /* ---- Brand indigo (primary) — Mantine switchitColor tuple ---- */
  --indigo-50:  #eff2ff;
  --indigo-100: #dde1f3;
  --indigo-200: #bbc1e0;
  --indigo-300: #959fcd;
  --indigo-400: #7681be;
  --indigo-500: #626fb4;
  --indigo-600: #5765b1;  /* ← primary brand color (logo) */
  --indigo-700: #47559c;
  --indigo-800: #3e4c8c;
  --indigo-900: #33417d;

  /* ---- Navy (dark surfaces: hero, login, footer art) ---- */
  --navy-700: #232c63;
  --navy-800: #1b2150;
  --navy-900: #141a3e;
  --navy-950: #0e1330;

  /* ---- Mint / teal (secondary accent) ---- */
  --mint-100: #e4f7ef;
  --mint-200: #c3ecdc;
  --mint-300: #a7e3cc;
  --mint-400: #96e6c8;  /* ← hero CTA button */
  --mint-500: #6fcfac;
  --mint-600: #4bb88f;
  --mint-700: #2f9a73;

  /* ---- Neutrals (Mantine gray-ish ramp) ---- */
  --white:    #ffffff;
  --gray-50:  #f8f9fb;
  --gray-100: #f1f3f7;
  --gray-200: #e9ecf2;
  --gray-300: #dee2eb;
  --gray-400: #ced4e0;
  --gray-500: #adb5c4;
  --gray-600: #868ea0;
  --gray-700: #5c6475;
  --gray-800: #3a4150;
  --gray-900: #21262f;
  --black:    #11151c;

  /* ---- Semantic status ---- */
  --success: #2f9a73;
  --success-surface: #e4f7ef;
  --warning: #e8a33d;
  --warning-surface: #fbf1de;
  --danger:  #e0564f;
  --danger-surface: #fce8e7;
  --info:    #5765b1;
  --info-surface: #eff2ff;

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

  /* Brand */
  --brand:           var(--indigo-600);
  --brand-strong:    var(--indigo-900);
  --brand-soft:      var(--indigo-50);
  --brand-contrast:  var(--white);
  --accent:          var(--mint-400);
  --accent-strong:   var(--mint-600);
  --accent-contrast: var(--navy-900);

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-600);
  --text-on-brand: var(--white);
  --text-on-dark:  var(--white);
  --text-link:     var(--indigo-600);

  /* Surfaces */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-brand:   var(--indigo-600);
  --surface-dark:    var(--navy-800);
  --surface-hover:   var(--gray-100);

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

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--indigo-600) 45%, transparent);
}