/* ============================================================================
 *  pta-tokens.css — the Journal's design tokens, matched to Polelo Trading
 *  Academy.
 *
 *  WHY THIS FILE EXISTS
 *  The same :root block was previously copy-pasted into ten different PHP
 *  files, each drifting slightly from the others. Changing a colour meant
 *  finding all ten. This is now the single source of truth; every page links
 *  it and nothing else declares these variables.
 *
 *  The variable NAMES are deliberately unchanged from the old journal palette
 *  (--bg, --accent, --profit, --loss …) so the ~1000 existing var() references
 *  across the app keep working untouched. Only the VALUES moved onto the
 *  Academy's palette.
 *
 *  THE PALETTE
 *  Six approved brand colours, nothing else:
 *    #28282A charcoal   #4B4951 dark grey   #ADABAE grey
 *    #C5C3C6 light grey #D4D4D4 pale grey   #EDE2CC warm cream
 *
 *  PROFIT AND LOSS — the one place we do not go fully monochrome.
 *  A trading journal has to let someone tell a winning day from a losing one
 *  at a glance, so --profit and --loss keep a hue difference. They use the
 *  Academy's own muted semantic tokens (sage / terracotta) rather than the
 *  old #00C896 and #FF4757, which were far outside the brand. Both are
 *  measured above 7:1 against the charcoal ground, and they differ in
 *  lightness as well as hue so they survive colour-blindness.
 * ========================================================================== */

:root{
  /* ── Brand six ─────────────────────────────────────────────────────── */
  --pta-charcoal:#28282A;
  --pta-dark-grey:#4B4951;
  --pta-grey:#ADABAE;
  --pta-light-grey:#C5C3C6;
  --pta-pale-grey:#D4D4D4;
  --pta-cream:#EDE2CC;

  /* ── Surfaces, layered from the charcoal ground ────────────────────── */
  --bg:#1D1D1F;                 /* page ground — was #1A1C28 (navy)       */
  --bg2:#252527;                /* cards                                   */
  --bg3:var(--pta-charcoal);    /* raised / hover                          */
  --bg4:#34343A;                /* highest layer                           */

  /* ── Hairlines: cream-tinted so structure reads on charcoal ────────── */
  --border:rgba(237,226,204,.10);
  --border2:rgba(237,226,204,.18);
  --border3:rgba(237,226,204,.30);

  /* ── Accent: warm cream. Nothing competes with it. ─────────────────── */
  --accent:#EDE2CC;
  --accent2:#D4D4D4;
  --accent-dim:#D2C7AE;
  --accent-soft:rgba(237,226,204,.12);
  --on-accent:var(--pta-charcoal);   /* text sitting ON the cream         */
  --grad:linear-gradient(135deg,#EDE2CC,#D4D4D4);
  --glow:rgba(237,226,204,.18);
  /* Gradient-clipped text lives here, not in style.css — landing.php never
     links style.css, so a heading using var(--grad-text) had nothing to clip
     and rendered fully transparent. */
  --grad-text:linear-gradient(to bottom,#ffffff,var(--accent2),rgba(237,226,204,.55));
  --grad-r:linear-gradient(135deg,var(--accent2),var(--accent));

  /* ── Text ──────────────────────────────────────────────────────────── */
  --t1:#F1EEE7;                 /* primary   — 15.9:1 on --bg            */
  --t2:var(--pta-grey);         /* secondary —  7.4:1 on --bg            */
  /* Measured on every surface, not just the page ground. #8B8990 cleared AA
     on --bg (4.87) but fell to 4.43 on cards and 3.58 on the top layer, so all
     the small uppercase labels were failing. This clears 4.5 on all four. */
  --t3:#9E9CA3;                 /* muted — 6.2 on --bg, 5.6 card, 4.6 top  */

  /* ── Direction / outcome ───────────────────────────────────────────── */
  /* ── P&L: real green and red, deliberately ────────────────────────────
     The brand palette governs the CHROME — background, nav, buttons, type.
     It does not govern the DATA. In a trading journal green and red are not
     decoration, they are the fastest way to read a number, and traders expect
     them. Every other surface stays on brand.

     Both are measured against the page ground AND the card surface, because
     figures sit on cards more often than on the page:
        green  7.4 on --bg,  6.7 on --bg2
        red    5.0 on --bg,  4.6 on --bg2
     The classic #EF4444 was rejected — it measures 4.07 on cards and fails AA.

     Green/red is the worst possible pair for colour-blindness, so colour is
     never the only signal: figures keep their +/- sign and direction arrows. */
  --profit:#22C55E;
  --loss:#FF4757;
  /* Amber, not grey. A warning state that looks like every other neutral
     is not a warning. Measured 9.2:1 on cards. */
  --warn:#FBBF24;
  --profit-soft:rgba(34,197,94,.14);
  --loss-soft:rgba(255,71,87,.14);
  --warn-soft:rgba(251,191,36,.14);

  /* Aliases used by older rules, all resolving into the same family. */
  --ok:var(--profit);      --ok-soft:var(--profit-soft);
  --bad:var(--loss);       --bad-soft:var(--loss-soft);
  --green:var(--profit);   --green-bg:var(--profit-soft);
  --red:var(--loss);       --red-bg:var(--loss-soft);
  --gold:var(--accent);    --gold-soft:var(--accent-soft);
  --blue:var(--pta-dark-grey);

  /* ── Type ────────────────────────────────────────────────────────────
     Inter + Sora, the same pairing as the Academy.

     Poppins is gone: it is a rounded geometric face that reads as 2018-era
     startup rather than a trading desk.

     JetBrains Mono is gone from FIGURES. Monospace at display size is what
     made the KPI cards look like a terminal emulator. Numbers now use Sora
     with tabular-nums, which keeps digits aligned in a column — the only real
     reason to use a mono for figures — without the typewriter look. A system
     mono is kept for genuine code: trade IDs, hashes, references. */
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Sora',var(--font);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ── Geometry & motion ─────────────────────────────────────────────── */
  --sw:248px;                   /* sidebar width, expanded               */
  --sw-collapsed:64px;
  --th:62px;                    /* topbar height                         */
  --r:9px;
  --r-lg:14px;
  --ease:cubic-bezier(.2,.8,.3,1);
  --tr:.2s var(--ease);
}
