/* ============================================================================
   tokens.css — single source of truth for color across jjconnect.online
   ----------------------------------------------------------------------------
   The logic, in two rules:
     1) Every color is a step on a RAMP (50 = lightest tint … 900 = darkest shade).
     2) Components use ROLE tokens (named by job), never a raw ramp step or hex.

   Palette: the "F2 / Airy" direction — held back by LIGHTNESS, not darkness.
   Lighter canvas, clean (not burnt) hues, lighter navy. All role pairs are
   WCAG-checked (see note on --accent-contrast). Legacy names are aliased at the
   bottom so existing pages keep working as they migrate to the role tokens.
   ============================================================================ */
:root {
  /* ===== PRIMITIVE RAMPS =================================================== */

  /* neutral — cool, airy greys */
  --neutral-50:  #F9FBFE;
  --neutral-100: #F3F7FB;
  --neutral-200: #E9EEF4;
  --neutral-300: #D6DEE8;
  --neutral-400: #A7B2C0;
  --neutral-500: #647082;   /* muted text — passes AA on the light canvas */
  --neutral-600: #4A5566;
  --neutral-700: #343E4C;
  --neutral-800: #222C38;   /* body text */
  --neutral-900: #161D27;

  /* blue — brand / primary (clean, slightly brighter than before) */
  --blue-50:  #ECF4FB;
  --blue-100: #D4E6F6;
  --blue-200: #ABCBEA;
  --blue-300: #7FB0DE;
  --blue-400: #5494CE;
  --blue-500: #3A82C6;
  --blue-600: #2F77BE;   /* ★ primary            */
  --blue-700: #2A689F;   /* ★ navbar / hover (lighter than the old navy) */
  --blue-800: #234F78;
  --blue-900: #1A3A57;

  /* orange — accent. Bright & clean (not burnt). NOTE: too light to carry white
     text — accent buttons use --accent-contrast (dark). See roles below. */
  --orange-50:  #FFF4EC;
  --orange-100: #FEE3CC;
  --orange-200: #FCCDA0;
  --orange-300: #FAB175;
  --orange-400: #F89E55;
  --orange-500: #F79248;   /* ★ accent            */
  --orange-600: #EF8133;   /* accent hover        */
  --orange-700: #D86B1E;
  --orange-800: #AE5316;
  --orange-900: #7C3A10;

  /* red — danger (500 deepened to #C4453A so error TEXT clears AA) */
  --red-50:  #FBECEA;
  --red-100: #F6D0CC;
  --red-200: #EDABA4;
  --red-300: #E4867C;
  --red-400: #D6685C;
  --red-500: #C4453A;   /* ★ danger             */
  --red-600: #A8362C;
  --red-700: #882A22;
  --red-800: #67201A;
  --red-900: #481713;

  /* green — success */
  --green-50:  #ECF7F0;
  --green-100: #C6F0D6;
  --green-200: #98E0B6;
  --green-300: #66CC92;
  --green-400: #43B47A;
  --green-500: #2F9E68;
  --green-600: #2F855A;
  --green-700: #266B49;
  --green-800: #1F5239;
  --green-900: #173D2B;

  /* amber — warning (kept golden, distinct from the orange accent) */
  --amber-50:  #FBF6E7;
  --amber-100: #FBF1DA;
  --amber-200: #F2DCA2;
  --amber-300: #E6C266;
  --amber-400: #D3A536;
  --amber-500: #BE8430;   /* warning (use on light bg, bold/large text) */
  --amber-600: #9E6B1F;
  --amber-700: #7E5417;
  --amber-800: #5F3F12;
  --amber-900: #432C0E;

  /* ===== SEMANTIC ROLES (use THESE in components) ========================= */

  /* text */
  --text:          var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  #ffffff;

  /* surfaces */
  --bg:            var(--neutral-50);
  --surface:       #ffffff;
  --surface-sunken:var(--neutral-100);

  /* borders */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* brand / primary */
  --primary:         var(--blue-600);
  --primary-hover:   var(--blue-700);
  --primary-active:  var(--blue-800);
  --primary-subtle:  var(--blue-50);
  --primary-contrast:#ffffff;            /* white on primary = 4.66:1 ✓ */

  /* accent (CTAs). The bright orange needs DARK text — white fails (2.29:1),
     dark #5A2A0A passes (5.17:1). Use --accent-contrast for any text/icon on
     an --accent fill. */
  --accent:          var(--orange-500);
  --accent-hover:    var(--orange-600);
  --accent-subtle:   var(--orange-50);
  --accent-contrast: #5A2A0A;

  /* feedback states — base (text/icon/border) + subtle background */
  --success:        var(--green-600);
  --success-subtle: var(--green-50);
  --warning:        var(--amber-500);
  --warning-subtle: var(--amber-100);
  --danger:         var(--red-500);
  --danger-subtle:  var(--red-50);
  --info:           var(--blue-600);     /* reuses brand blue — no extra hue */
  --info-subtle:    var(--blue-50);

  /* focus ring */
  --ring: var(--blue-400);

  /* ===== LEGACY ALIASES =================================================== */
  /* Keep existing per-page CSS working while pages migrate to the role tokens.
     ⚠ --orange is now LIGHT: any `background:var(--orange); color:#fff` button
     must switch to dark text (var(--accent-contrast)) during rollout. */
  --blue:    var(--primary);     /* #2F77BE */
  --blue-dk: var(--blue-700);    /* #2A689F (lighter navbar) */
  --blue-lt: var(--blue-500);    /* #3A82C6 */
  --blue-bg: var(--blue-50);     /* #ECF4FB */
  --orange:  var(--accent);      /* #F79248 — see warning above */
  --orange-lt: var(--orange-400);
  --red:     var(--danger);      /* #C4453A */
  --card:    var(--surface);     /* #ffffff */
  --muted:   var(--text-muted);  /* #647082 */
}