/* Emkan Futures — Color tokens
   Palette: brand TEAL + warm cream, with black ink and sage accents.
   Teal scale confirmed by the client; token names kept as --pine-* for
   backwards-compatibility (they carry teal values). */
:root {
  /* ---- Brand teal scale (primary) ---- */
  --pine-950: #052e2a;
  --pine-900: #073f39; /* deepest — number badges, fine detail */
  --pine-800: #0a534b;
  --pine-700: #0e6a61; /* PRIMARY brand teal — headings, buttons */
  --pine-600: #12857a; /* mid — dark callout cards */
  --pine-500: #1aa595; /* bright teal accent — green logo variant */
  --pine-400: #3fc1b0;

  /* ---- Sage / mint (secondary accent) ---- */
  --sage-500: #9cc4b3;
  --sage-400: #bfe0d1; /* filled soft chips */
  --sage-300: #cbdfd5; /* tagline pill / number-badge tint */
  --sage-200: #dcebe3;
  --sage-100: #eaf3ee;

  /* ---- Sand / cream neutrals (warm) ---- */
  --sand-50:  #fbf9f4;
  --sand-100: #f7f3ea; /* PAGE background */
  --sand-200: #efe9dd;
  --sand-300: #e9e3d8; /* card & divider borders */
  --sand-400: #d9d2c4;

  /* ---- Ink / grays ---- */
  --ink-900: #121212; /* headlines, footer, near-black */
  --ink-700: #35332e;
  --ink-500: #6c665e; /* warm body gray */
  --ink-400: #8a847a;
  --ink-300: #b4afa4;

  --white: #ffffff;

  /* ---- Logo lockup accent colors (alternate brand marks) ---- */
  --accent-orange: #f1592a;
  --accent-blue:   #333ce0;

  /* ---- Semantic status ---- */
  --success: #1aa595;
  --warning: #d98a2b;
  --danger:  #c2452f;
  --info:    #333ce0;

  /* =========================================================
     Semantic aliases — reference these in components
     ========================================================= */
  --bg-page:        var(--sand-100);
  --bg-surface:     var(--white);
  --bg-surface-alt: var(--sand-50);
  --bg-inverse:     var(--pine-700);
  --bg-inverse-deep:var(--ink-900);
  --bg-sage:        var(--sage-300);

  --text-heading:   var(--pine-700);
  --text-title:     var(--ink-900);
  --text-body:      var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-pine:   #eaf3ee;
  --text-on-pine-muted: #a9c9bd;
  --text-on-ink:    #f2efe8;
  --text-link:      var(--pine-700);
  --text-link-hover:var(--pine-500);

  --border-subtle:  var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-pine:    var(--pine-700);

  --brand-primary:  var(--pine-700);
  --brand-primary-hover: var(--pine-600);
  --brand-primary-active: var(--pine-800);
  --brand-emerald:  var(--pine-500);
  --brand-teal:     var(--pine-700);
}