/* styles/tokens.css — design tokens (:root palette) + dark mode
   Part of the former single style.css, split by source order so the cascade is
   unchanged (loaded in sequence: tokens→base→landing→auth→portfolio→research→pages). */
/*
  style.css — the DESIGN (skin and clothing).
  Zen / Steve-Jobs feel: lots of empty space, one thing in focus,
  a soft paper background, calm ink-coloured text, one quiet accent.

  The :root block below is our "palette". Change a value here and it
  updates everywhere — try it once you're comfortable.
*/
:root {
  /* The "Platinum" palette: cool morning light, one steel-sage accent.
     Platinum #f4f6f7 · Cooling #d6dedd · Green Platinum #9cb0a2 ·
     Steel Sage #4e6157 · Deep Pine #182220. */
  --paper:     #f4f6f7;  /* Platinum — a cool, clean off-white         */
  --ink:       #182220;  /* Deep Pine — near-black with a green undertone */
  --ink-soft:  #6f7f76;  /* muted sage-grey for secondary text         */
  --line:      #d6dedd;  /* Cooling — hairline borders                 */
  --accent:    #4e6157;  /* Steel Sage — the single, restrained accent */
  --neg:       #c17f5f;  /* Terracotta — the one warm note, losses only */
  --mchart-dn: #e0303f;  /* candlestick down — a true Yahoo-Finance red (chart only) */
  --bench:     #7c86a0;  /* a muted slate, only for the Nasdaq benchmark line */
  --white:     #ffffff;  /* raised surfaces: cards, panels, chart halos */
  --on-accent: #ffffff;  /* text/marks that sit ON a coloured button    */
  --accent-strong: #3e4e45; /* the accent, a touch deeper — button hovers */
  --nav-bg: rgba(244, 246, 247, 0.82);  /* the navbar's translucent platinum */
  --nav-h: 56px;                         /* live bar height (nav.js keeps it exact) */
  /* Chameleon navbar: the live bar colour + text tone. Default to the theme-aware
     platinum strip; nav.js overrides these per-section on pages that declare
     data-navbg (the landing hero goes sage green). */
  --navbg: var(--nav-bg);
  --navink: var(--ink);
  --navink-soft: var(--ink-soft);

  --card:      #fbfcfc;  /* the portfolio card surface: a hair lighter than paper */
  --headline:  #182220;  /* the big value number — Deep Pine, calm and deep */
  --tip-bg:    rgba(240, 242, 245, 0.90);  /* the hover tooltip card — cool "Silver" platinum, a touch see-through */
  --tip-ink:   #23262b;  /* graphite text on the silver tooltip */
  --tip-sub:   rgba(35, 38, 43, 0.55);   /* muted graphite text on the tooltip */
  --tip-rim:   #d7dbe1;  /* a soft cool border around the silver card */

  /* Platinum sheen — a whisper of a gradient so surfaces read like brushed
     metal, not flat paint. Kept subtle on purpose (Zen restraint). */
  --paper-grad: linear-gradient(180deg, #f8fafb 0%, #f4f6f7 45%, #eef2f2 100%);
  --card-grad:  linear-gradient(180deg, #ffffff 0%, #fbfcfc 55%, #f4f6f7 100%);
  --sheen-hi:   inset 0 1px 0 rgba(255, 255, 255, 0.8);  /* top highlight edge */

  --radius: 14px;        /* gentle rounded corners */

  /* Account switcher: a senyera-gold crown + Trencadís mosaic tiles, every colour
     drawn from the brand palette (the sage spires, Green Platinum, the finial gold,
     and the one terracotta warm note). See the account picker near the bottom. */
  --gold:      #fcdd09;  /* senyera yellow — the finial gold, marks the account in view */
  --gold-deep: #e6c105;  /* a touch deeper, for small gold marks on light grounds */
  --gold-ink:  #182220;  /* dark monogram on the light gold / platinum tiles */
  --gold-tint: rgba(252, 221, 9, 0.13);  /* row wash behind the account you're viewing */
  --sel-tint:  rgba(78, 97, 87, 0.10);   /* calm sage wash behind a merely-ticked account */
  --gold-glow: 0 0 0 2px var(--white), 0 0 0 3.6px var(--gold), 0 2px 9px -1px rgba(230, 193, 5, 0.5);
  /* The mosaic tiles are one hue, five lights: the spire green from Deep Pine up to
     Green Platinum (only the gold crown adds warmth — the tiles stay all-green). */
  --at1: #3b4a42; --at2: #4e6157; --at3: #667c70; --at4: #7e948a; --at5: #9cb0a2;
}

/* ---------- Dark mode ----------
   A calm, warm dark theme — the same palette, dimmed. Nothing else changes:
   because almost everything is painted from these variables, flipping them
   here re-themes the whole app. Toggled from the account menu; the choice is
   remembered on the device (degiro.theme.v1) and applied before first paint
   by a tiny inline script in each page's <head> (so there's no light flash). */
html[data-theme="dark"] {
  --paper:     #131c19;  /* Deep Pine — near-black green */
  --ink:       #eef2f1;  /* soft platinum light, the new "ink" */
  --ink-soft:  #9cb0a2;  /* Green Platinum, still readable on dark */
  --line:      #2b3a34;  /* pine hairlines, a shade above the paper */
  --accent:    #86a08d;  /* Green Platinum, lifted so it reads on dark */
  --neg:       #cf9078;  /* Terracotta, lifted for dark */
  --mchart-dn: #f2555f;  /* candlestick down — Yahoo red, lifted for dark */
  --bench:     #97a1bc;  /* the slate, lifted for the Nasdaq benchmark on dark */
  --white:     #1b2723;  /* raised surfaces sit just above the pine */
  --accent-strong: #9cb0a2; /* the accent lifted on hover (dark) */
  --nav-bg: rgba(19, 28, 25, 0.82);
  --card:      #1a2521;  /* the portfolio card surface, lifted off the deep pine */
  --headline:  #c2d2c7;  /* the big value number, a light sage on dark */
  --tip-bg:    rgba(236, 238, 242, 0.92);  /* the hover tooltip — cool "Silver" platinum card */
  --tip-ink:   #23262b;
  --tip-sub:   rgba(35, 38, 43, 0.55);
  --tip-rim:   #cfd3da;
  /* --on-accent stays white: text still sits on the sage/clay buttons. */

  /* Platinum sheen, dark: a faint pine gradient + a barely-there top edge. */
  --paper-grad: linear-gradient(180deg, #16211d 0%, #131c19 45%, #0f1714 100%);
  --card-grad:  linear-gradient(180deg, #1e2a25 0%, #1a2521 60%, #16201c 100%);
  --sheen-hi:   inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Account switcher, dark: the mosaic tiles lift so they read on the pine menu;
     the senyera gold (--gold/--gold-deep/--gold-ink) stays constant across themes. */
  --gold-tint: rgba(252, 221, 9, 0.11);
  --sel-tint:  rgba(134, 160, 141, 0.14);
  --gold-glow: 0 0 0 2px var(--white), 0 0 0 3.6px var(--gold), 0 2px 10px -1px rgba(252, 221, 9, 0.5);
  --at1: #52655b; --at2: #647a6e; --at3: #7a9084; --at4: #93a89e; --at5: #aec0b4;
}

/* Reset a few browser defaults so spacing is predictable */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  background-image: var(--paper-grad);  /* platinum sheen — a whisper of gradient */
  background-attachment: fixed;          /* stays put; the sheen doesn't tile on scroll */
  color: var(--ink);
  /* The clean system font — on your Mac this is Apple's San Francisco */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One narrow, centred column with generous breathing room */
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 64px;
}
/* The Top Analysts table has five columns, so it gets a touch more room — the
   masthead and key field stay centred, the lanes get to breathe on one line. */
.page--wide { max-width: 900px; }
/* The tracker opens straight onto its card, so it wants far less headroom than
   the pages that lead with a centred masthead — it sits up near the navbar. */
.page--app { padding-top: 40px; }