/* LittleWins — Color tokens
   Brand core (authoritative):
     Navy   #0E2238  — "Little", ink, dark surfaces
     Green  #1B7A3D  — "Wins", the checkmark, progress & success
     Orange #F07F1F  — ".ma" pill, energy, CTA highlight
     White  #FFFFFF  — on-orange text, light surface
   Logo-file source values (for reference): navy #0A2031, green #117F3F, orange #F77A26.
   Scales below are oklch-harmonized around the brand hues. */
:root {
  /* ---- Navy ---- */
  --navy-900: #071522;
  --navy-800: #0A1B2D;
  --navy-700: #0E2238; /* BRAND NAVY */
  --navy-600: #16324f;
  --navy-500: #21456a;
  --navy-400: #3d648c;
  --navy-300: #6b88a8;
  --navy-200: #a7bccd;
  --navy-100: #d7e1ea;
  --navy-050: #eef3f7;

  /* ---- Green ---- */
  --green-900: #0c3d1f;
  --green-800: #12572c;
  --green-700: #166a35;
  --green-600: #1B7A3D; /* BRAND GREEN */
  --green-500: #219a4d;
  --green-400: #3cb96a;
  --green-300: #74d197;
  --green-200: #aee5c2;
  --green-100: #d7f3e1;
  --green-050: #ecfaf1;

  /* ---- Orange ---- */
  --orange-900: #7a3a06;
  --orange-800: #a8500c;
  --orange-700: #cf6813;
  --orange-600: #F07F1F; /* BRAND ORANGE */
  --orange-500: #f8933c;
  --orange-400: #fbab63;
  --orange-300: #fdc590;
  --orange-200: #fedebc;
  --orange-100: #ffedd9;
  --orange-050: #fff6ec;

  /* ---- Neutrals (warm-cool balanced) ---- */
  --white:      #ffffff;
  --paper:      #f7f9fb;  /* app background */
  --paper-alt:  #eef2f6;  /* alt panel / rail */
  --line:       #dce3ea;  /* hairline borders */
  --line-strong:#c3cdd7;
  --ink-500:    #5b6b7b;  /* muted text */
  --ink-700:    #34434f;  /* secondary text */
  --ink-900:    #0E2238;  /* primary text = navy */
  --black:      #050d16;

  /* =========================================================
     SEMANTIC ALIASES — reference these, not raw scales
     ========================================================= */
  --brand-navy:   var(--navy-700);
  --brand-green:  var(--green-600);
  --brand-orange: var(--orange-600);

  /* text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-on-dark: var(--white);
  --text-on-orange: var(--white);
  --text-on-green:  var(--white);
  --text-link:    var(--green-600);
  --text-link-hover: var(--green-700);

  /* surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-sunk:   var(--paper-alt);
  --surface-dark:   var(--navy-700);
  --surface-dark-2: var(--navy-800);
  --surface-board:  var(--navy-700); /* the magnetic Board field */

  /* accents / states */
  --accent:          var(--green-600);
  --accent-hover:    var(--green-700);
  --accent-press:    var(--green-800);
  --highlight:       var(--orange-600);
  --highlight-hover: var(--orange-700);
  --success:  var(--green-600);
  --warning:  var(--orange-600);
  --danger:   #d64545;
  --info:     var(--navy-500);

  /* currency (LWC) */
  --lwc-coin:       var(--orange-600);
  --lwc-coin-edge:  var(--orange-800);
  --lwc-amount:     var(--navy-700);

  /* borders */
  --border-subtle: var(--line);
  --border-strong: var(--line-strong);
  --border-dark:   rgba(255,255,255,.14);
  --focus-ring:    var(--green-500);
}