/* ============================================================
   Outer — Color tokens
   Sampled from brand isotipo & stickers.
   Navy #001136 · Petrol #003859 · Orange #FFA449 · Cream #EDE2CF
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --outer-navy:      #001136;  /* primary — window/sky, wordmark */
  --outer-petrol:    #003859;  /* secondary — mountain, "Life's out there" */
  --outer-orange:    #FFA449;  /* accent — the rising sun */
  --outer-cream:     #EDE2CF;  /* warm neutral canvas */

  /* ---- Navy scale ---- */
  --navy-900: #000B24;
  --navy-800: #001136;
  --navy-700: #051B47;
  --navy-600: #0B2A5C;
  --navy-500: #143a72;
  --navy-400: #38568c;
  --navy-300: #6a80a8;
  --navy-200: #a6b3c9;
  --navy-100: #d6dde7;

  /* ---- Petrol / teal scale ---- */
  --petrol-800: #002438;
  --petrol-700: #003859;
  --petrol-600: #0d4d70;
  --petrol-500: #1d6488;
  --petrol-400: #4a86a5;
  --petrol-300: #82abc2;
  --petrol-200: #bcd3e0;
  --petrol-100: #e2edf3;

  /* ---- Orange / sun scale ---- */
  --orange-700: #d97b1f;
  --orange-600: #f18d2c;
  --orange-500: #FFA449;
  --orange-400: #ffb96f;
  --orange-300: #ffd0a0;
  --orange-200: #ffe4c9;
  --orange-100: #fff4e8;

  /* ---- Cream / sand scale ---- */
  --cream-500: #E2D3B7;
  --cream-400: #EDE2CF;  /* base */
  --cream-300: #F2EADD;
  --cream-200: #F7F1E8;
  --cream-100: #FBF8F2;

  /* ---- Neutrals (warm greys tuned to cream) ---- */
  --ink-900: #14161c;
  --ink-700: #3a3f47;
  --ink-500: #5f6670;
  --ink-400: #868d97;
  --ink-300: #b4bac2;
  --ink-200: #dce0e4;
  --ink-100: #eef0f2;
  --white:   #ffffff;

  /* ---- Semantic (functional) ---- */
  --success: #2f7d5b;
  --warning: #E29B2B;
  --danger:  #C24A3B;
  --info:    var(--petrol-600);

  /* ============================================================
     Semantic aliases — reference these in product UI
     ============================================================ */
  --bg-page:        var(--cream-200);
  --bg-canvas:      var(--cream-100);
  --surface-card:   var(--white);
  --surface-sunken: var(--cream-300);
  --surface-dark:   var(--outer-navy);
  --surface-petrol: var(--outer-petrol);

  --text-strong:    var(--outer-navy);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--cream-100);
  --text-on-orange: var(--outer-navy);

  --accent:         var(--outer-orange);
  --accent-hover:   var(--orange-600);
  --accent-press:   var(--orange-700);

  --brand:          var(--outer-navy);
  --brand-hover:    var(--navy-700);
  --brand-press:    var(--navy-900);

  --border-subtle:  color-mix(in srgb, var(--outer-navy) 10%, transparent);
  --border-default: color-mix(in srgb, var(--outer-navy) 16%, transparent);
  --border-strong:  color-mix(in srgb, var(--outer-navy) 28%, transparent);
  --focus-ring:     color-mix(in srgb, var(--outer-orange) 60%, transparent);

  --link:           var(--petrol-600);
  --link-hover:     var(--outer-navy);
}