/* ==========================================================================
   PIP TEMPLE BRAND TOKENS
   This is the ONLY file you edit to change colours, fonts or corner radius.
   Every page reads these values. See docs/BRANDING.md for how-to.

   Light theme values are first; dark theme values follow and are applied
   when the visitor's device is in dark mode or they pick "Dark".
   ========================================================================== */

/* ---- Fonts (self-hosted IBM Plex, SIL Open Font License) ---------------- */
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Serif"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Serif"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Plex Serif", Georgia, "Times New Roman", serif;   /* big headlines only */
  --font-ui:      "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* all figures */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 6px;    /* buttons, inputs, pills */
  --radius-lg: 12px;   /* panels */

  /* ---- Colour: LIGHT theme -------------------------------------------- */
  --bg:          #ffffff;  /* page background */
  --surface:     #fafafa;  /* panels, table headers */
  --surface-2:   #f2f3f5;  /* hover, subtle fills */
  --line:        #e6e7ea;  /* borders and grid lines */
  --line-strong: #cfd2d8;
  --fg:          #0a0a0a;  /* main text */
  --fg-muted:    #5f646d;  /* secondary text */
  --fg-faint:    #8b9099;  /* hints, axis labels */
  --invert-bg:   #0a0a0a;  /* primary button */
  --invert-fg:   #ffffff;
  --accent:      #2457f5;  /* links, focus ring, "you" highlight: use sparingly */
  --accent-soft: rgba(36, 87, 245, 0.08);
  --up:          #138a4a;  /* profit (semantic, not brand) */
  --down:        #d23b3b;  /* loss (semantic, not brand) */
  --warn:        #a35c00;  /* stale data */
  --warn-soft:   #fff4e0;
  --err-soft:    #fdeeee;
  --chart-fill:  rgba(10, 10, 10, 0.06);
  color-scheme: light;
}

/* ---- Colour: DARK theme (keep these two blocks identical) ------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #0a0a0b; --surface-2: #141518; --line: #232428; --line-strong: #34363c;
    --fg: #ededed; --fg-muted: #a0a4ab; --fg-faint: #6d717a; --invert-bg: #ededed; --invert-fg: #000000;
    --accent: #6b93ff; --accent-soft: rgba(107, 147, 255, 0.12);
    --up: #3ccf7f; --down: #ff6b6b; --warn: #f0b04a; --warn-soft: #2a1f0b; --err-soft: #2a1213;
    --chart-fill: rgba(237, 237, 237, 0.07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #0a0a0b; --surface-2: #141518; --line: #232428; --line-strong: #34363c;
  --fg: #ededed; --fg-muted: #a0a4ab; --fg-faint: #6d717a; --invert-bg: #ededed; --invert-fg: #000000;
  --accent: #6b93ff; --accent-soft: rgba(107, 147, 255, 0.12);
  --up: #3ccf7f; --down: #ff6b6b; --warn: #f0b04a; --warn-soft: #2a1f0b; --err-soft: #2a1213;
  --chart-fill: rgba(237, 237, 237, 0.07);
  color-scheme: dark;
}