/* ============================================================
   Uncharted Strategy — Color tokens
   Anchored by Deep Teal + warm Orange. Grounded, confident,
   with natural warmth. Lead with Deep Teal & White; bring in
   Orange as a single accent per layout.
   ============================================================ */

:root {
  /* ---- Brand core (from brand guide) ---- */
  --uc-deep-teal:        #005C5C; /* headings, logo text, borders, dark UI */
  --uc-orange:           #EF7C06; /* accent, CTA, links, highlights */
  --uc-dark-teal-bg:     #0F2A33; /* immersive backgrounds, title slides */
  --uc-topo-teal:        #2ABFA4; /* decorative topographic map lines */
  --uc-white:            #FFFFFF; /* canvas, light layouts */

  /* ---- Teal ramp (derived from Deep Teal / Dark Teal BG) ---- */
  --uc-teal-950:         #0B2129; /* deepest immersive bg */
  --uc-teal-900:         #0F2A33; /* dark teal bg */
  --uc-teal-800:         #123642;
  --uc-teal-700:         #0A4A4A;
  --uc-teal-600:         #005C5C; /* deep teal */
  --uc-teal-500:         #0A7373;
  --uc-teal-400:         #2ABFA4; /* topographic teal */
  --uc-teal-300:         #5FD3BE;
  --uc-teal-200:         #9FE5D7;
  --uc-teal-100:         #D6F4EE;
  --uc-teal-50:          #EEFBF8;

  /* ---- Orange ramp (holds hue ~30°; dark stays vivid, light goes amber-cream not peach) ---- */
  --uc-orange-700:       #D86E00; /* press / active state (deeper, still vivid — not rusty) */
  --uc-orange-600:       #EF7C06; /* brand orange — the accent */
  --uc-orange-500:       #F79336; /* hover (lighten) / links on dark */
  --uc-orange-300:       #F8B25A; /* light accent — chart fills, soft highlights */
  --uc-orange-100:       #FBEBD7; /* faint tint — soft accent backgrounds */
  --uc-orange-50:        #FDF7EF; /* faintest warm wash */

  /* ---- Warm neutrals (document grays) ---- */
  --uc-ink:              #1A2B30; /* body text on white — warm near-black */
  --uc-gray-700:         #3C4A4E;
  --uc-gray-600:         #5A6A6E; /* secondary text / captions */
  --uc-gray-400:         #93A1A4;
  --uc-gray-300:         #C3CDCE;
  --uc-gray-200:         #E2E8E8;
  --uc-gray-100:         #F1F5F4;
  --uc-paper:            #FAFBFA; /* off-white document canvas */

  /* ---- Status (kept in-family, used sparingly) ---- */
  --uc-success:          #0A7373;
  --uc-warning:          #EF7C06;
  --uc-danger:           #C0392B;

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

  /* Surfaces */
  --surface-canvas:      var(--uc-white);
  --surface-paper:       var(--uc-paper);
  --surface-card:        var(--uc-white);
  --surface-sunken:      var(--uc-gray-100);
  --surface-dark:        var(--uc-dark-teal-bg);
  --surface-dark-deep:   var(--uc-teal-950);
  --surface-brand:       var(--uc-deep-teal);

  /* Text */
  --text-heading:        var(--uc-deep-teal);
  --text-body:           var(--uc-ink);
  --text-muted:          var(--uc-gray-600);
  --text-on-dark:        var(--uc-white);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.72);
  --text-on-brand:       var(--uc-white);
  --text-accent:         var(--uc-orange);
  --text-link:           var(--uc-orange);

  /* Borders & lines */
  --border-default:      var(--uc-gray-200);
  --border-strong:       var(--uc-deep-teal);
  --border-frame:        var(--uc-deep-teal);   /* the teal card frame */
  --border-accent:       var(--uc-orange);      /* single orange corner accent */
  --border-on-dark:      rgba(42, 191, 164, 0.35);

  /* Interactive / accent */
  --accent:              var(--uc-orange);
  --accent-hover:        var(--uc-orange-700);
  --accent-soft:         var(--uc-orange-50);
  --brand:               var(--uc-deep-teal);
  --brand-hover:         var(--uc-teal-700);
  --brand-soft:          var(--uc-teal-50);

  /* Decorative */
  --topo-line:           var(--uc-topo-teal);
  --topo-trail:          var(--uc-orange);       /* dashed trail line */
  --topo-line-on-white:  rgba(42, 191, 164, 0.45);
  --topo-trail-on-white: rgba(239, 124, 6, 0.55);

  /* Focus */
  --focus-ring:          rgba(42, 191, 164, 0.55);
}