/* =====================================================================
   learn.raahibhushan.in · design tokens (single source of truth)
   ---------------------------------------------------------------------
   Light theme first. Dark theme = same token names under
   [data-theme="dark"], so components never hard-code a colour.
   Shared with the private dashboard on purpose:
     --ink #1a1a2e, the good/bad/warn trio and the buy/sell hues
     (morning_brief.html), so P&L reads the same everywhere.
   Different from the dashboard on purpose:
     warm "paper" background + serif reading face, because this is a
     long-form reading product used on phones, not a monitoring grid.
   All text/background pairs below are >= 4.5:1 (body) and
   >= 3:1 (large text, UI borders, focus ring) in both themes.
   ===================================================================== */

:root {
  /* ---- type families: system stacks only (no web-font download on mobile data) ---- */
  --font-read: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---- type scale (mobile base 17px reading, 15px UI; ratio ~1.2) ---- */
  --fs-xs: 0.75rem;    /* 12  meta, chart axes */
  --fs-sm: 0.8125rem;  /* 13  labels, badges */
  --fs-ui: 0.9375rem;  /* 15  controls */
  --fs-read: 1.0625rem;/* 17  body prose, mobile */
  --fs-h4: 1.0625rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.5rem;
  --fs-h1: 1.875rem;
  --lh-read: 1.65;
  --lh-ui: 1.4;
  --measure: 66ch;     /* standalone text only (ledes, notes); NOT used for chapter elements */
  --page: 1240px;     /* ONE page container: header, main, footer (admin pages set 1440px for all three) */
  --col: 48rem;        /* ONE content column for every chapter-level element: blocks, layers,
                          takeaways, notes, risk note, pager, read bar. 768px. */

  /* ---- spacing (4px grid) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- shape ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --tap: 44px;          /* minimum touch target */

  /* ---- surfaces ---- */
  --paper: #fbf9f5;         /* page background, warm */
  --surface: #ffffff;       /* cards, blocks */
  --surface-2: #f4f1ea;     /* inset panels, table heads */
  --surface-3: #ebe6db;     /* pressed / track */
  --line: #e4ded2;
  --line-strong: #c9c1b1;

  /* ---- text ---- */
  --ink: #1a1a2e;           /* headings, house ink */
  --text: #2b2b38;          /* body, 13.9:1 on paper */
  --muted: #5f5b66;         /* secondary, 6.4:1 on paper */
  --faint: #807a86;         /* tertiary meta only, 4.5:1 on surface */

  /* ---- accent: deep teal (house --l1 family). Interactive = teal, never P&L. ---- */
  --accent: #17676a;        /* 6.1:1 on paper */
  --accent-ink: #0f4f52;
  --accent-soft: #e3f0ef;
  --accent-line: #a9cfcd;
  --on-accent: #ffffff;

  /* ---- semantic (house trio) ---- */
  --good: #2b7a4b;  --good-bg: #e7f4ec; --good-line: #b3dbc2;
  --bad:  #b42a2a;  --bad-bg:  #fbecec; --bad-line:  #eeb5b5;
  --warn: #8a5a0b;  --warn-bg: #fbf1dc; --warn-line: #e9cf96;
  --info: #2b5c8f;  --info-bg: #e8f0f9; --info-line: #b5cbe6;

  /* ---- trade sides (house buy/sell hues; always paired with a text label) ---- */
  --buy: #2b6cb0;  --buy-bg: #e8f1fb;
  --sell: #6b46c1; --sell-bg: #f1ecfb;

  /* ---- highlight (changed numbers, selection feedback, search) ---- */
  --mark: #fff0a8;
  --mark-ink: #4a3b00;

  /* ---- depth levels (badges + rule colours) ---- */
  --lvl-quick: #17676a;
  --lvl-medium: #2b5c8f;
  --lvl-long: #6b46c1;

  /* ---- charts ---- */
  --chart-line: #1a1a2e;
  --chart-post: #17676a;
  --chart-grid: #ece7dc;
  --chart-axis: #6b6672;
  --chart-ref: #9a93a0;
  --chart-future: #f0ece3;  /* the hatched "not yet known" region */
  --chart-t0: #b42a2a;

  /* ---- focus ---- */
  --focus: #1b5fd1;         /* 5.6:1 on paper, distinct from teal accent */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus);

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(26, 26, 46, .06), 0 1px 1px rgba(26, 26, 46, .04);
  --shadow-2: 0 6px 20px rgba(26, 26, 46, .12);

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

/* Desktop reading size steps up one notch. */
@media (min-width: 900px) {
  :root { --fs-read: 1.125rem; --fs-h1: 2.125rem; --fs-h2: 1.625rem; }
}

[data-theme="dark"] {
  --paper: #13141c;
  --surface: #1b1d27;
  --surface-2: #222532;
  --surface-3: #2c3040;
  --line: #2f3344;
  --line-strong: #454a5f;

  --ink: #f2efe8;
  --text: #dcd8cf;
  --muted: #a9a4ae;
  --faint: #8e8994;

  --accent: #5fc0bb;
  --accent-ink: #8ad6d1;
  --accent-soft: rgba(95, 192, 187, .13);
  --accent-line: #2f6f6c;
  --on-accent: #0c1f1f;

  --good: #6cc892;  --good-bg: rgba(108, 200, 146, .12); --good-line: #2f6b49;
  --bad:  #f08b8b;  --bad-bg:  rgba(240, 139, 139, .12); --bad-line:  #7a3434;
  --warn: #e7b65e;  --warn-bg: rgba(231, 182, 94, .12);  --warn-line: #7a5d22;
  --info: #8db8e8;  --info-bg: rgba(141, 184, 232, .12); --info-line: #35557a;

  --buy: #7fb2ea;  --buy-bg: rgba(127, 178, 234, .13);
  --sell: #b9a0f0; --sell-bg: rgba(185, 160, 240, .13);

  --mark: #5a4a0c;
  --mark-ink: #fff3c4;

  --lvl-quick: #5fc0bb;
  --lvl-medium: #8db8e8;
  --lvl-long: #b9a0f0;

  --chart-line: #e9e5dc;
  --chart-post: #5fc0bb;
  --chart-grid: #2a2e3d;
  --chart-axis: #a9a4ae;
  --chart-ref: #6d6878;
  --chart-future: #1f2230;
  --chart-t0: #f08b8b;

  --focus: #8fb4ff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}