/* Konexus design tokens — canonical source.
   Preview HTML files inline a copy of the blocks they demonstrate,
   because previews must be self-contained (no external stylesheets).

   COLOR RULE — Option 1, "Navy Anchor". Two blues, two jobs:
     Navy  is never a button.
     Action blue is never a background.
   Break that and the merchant pairing flow loses the one signal it relies on:
   the blue thing is the thing to press.

   One exception: logo artwork. The Konexus mark carries action blue on two of
   its tiles and the Axon mark carries it on the hub. Both are identity, not
   interaction, and neither is a background. Nothing else gets the exemption. */

:root {
  /* ---------- Type — system stack, no embedded font files ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale — 1.2 ratio, rounded to whole px */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.375rem;   /* 22 */
  --text-2xl: 1.625rem;  /* 26 */
  --text-3xl: 2rem;      /* 32 */
  --text-4xl: 2.5rem;    /* 40 */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Spacing — 4px base ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---------- Navy — identity, chrome, slide backgrounds ---------- */
  --navy-900: #071A30;
  --navy-800: #0B2545;  /* the brand color */
  --navy-700: #123A6B;
  --navy-600: #17498A;
  --navy-500: #1B54A0;
  --navy-300: #7EA9E8;
  --navy-100: #DCE8FA;
  --navy-50:  #F2F6FD;

  /* ---------- Action blue — buttons, links, focus, anything clickable ----------
     600 on white text = 4.8:1 (AA). Do not lighten past 600 for filled buttons. */
  --action-800: #093C7D;
  --action-700: #0C51A6;
  --action-600: #0F6FE0;  /* the action color */
  --action-500: #3B8CE8;
  --action-300: #7FB3F2;
  --action-200: #BBD7F9;
  --action-100: #DEEBFD;
  --action-50:  #F2F7FE;

  /* ---------- Neutrals (cool) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F4F6F9;
  --gray-100: #EDF0F3;
  --gray-200: #DDE2E9;
  --gray-400: #9AA5B4;
  --gray-500: #5A6675;
  --gray-800: #2E3742;
  --gray-900: #0F1419;

  /* ---------- Status — load-bearing in the fault-isolation view ---------- */
  --success:    #0E8A5F;
  --success-bg: #E1F5EC;
  --warn:       #B87503;
  --warn-bg:    #FCF1DC;
  --error:      #C8362F;
  --error-bg:   #FBE7E5;

  /* ---------- Semantic aliases — use these in components ----------
     Components reference the aliases, never the raw ramps. A rebrand, or
     splitting Konexus from a future second product, is then a change here
     rather than a search-and-replace across every component. */
  --brand:          var(--navy-800);
  --brand-deep:     var(--navy-900);
  --brand-muted:    var(--navy-700);
  --on-brand:       var(--gray-0);

  --action:         var(--action-600);
  --action-hover:   var(--action-700);
  --action-subtle:  var(--action-100);
  --on-action:      var(--gray-0);

  --surface:        var(--gray-0);
  --surface-sunken: var(--gray-50);
  --border:         var(--gray-200);

  --text:           var(--gray-900);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
}