/* shared/styles/base.css
   Loaded once by the shell (index.html). Defines CSS variables and
   resets that every module can rely on. Modules should NOT redefine
   these variables — only consume them. */

/* Panchang (variable font) — brand/DISPLAY typeface only (bold
   headlines), added 2026-07-30 from shared/Fonts/WEB. Deliberately kept
   as its OWN variable (--font-display) rather than folded into
   --font-sans: --font-sans is consumed throughout the app's actual
   INTERFACE chrome (buttons, menus, toolbars — see drawing-tools.css/
   settings.css/trading-log.css), and swapping that wholesale would
   restyle every control in the trading app itself, not just written
   content. font-weight 200–800 all resolve correctly since this is a
   single variable-font file (see the wght axis range in the @font-face
   below). Sharp/high-contrast letterforms read great at large display
   sizes (h1/h2/h3, brand logotype) but are tiring for paragraphs — see
   --font-body (Montserrat) below for that. */
@font-face {
  font-family: 'Panchang-Variable';
  src: url('/shared/Fonts/WEB/fonts/Panchang-Variable.woff2') format('woff2'),
       url('/shared/Fonts/WEB/fonts/Panchang-Variable.woff') format('woff'),
       url('/shared/Fonts/WEB/fonts/Panchang-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

/* Montserrat (variable font) — content BODY typeface (paragraphs, lists,
   labels), added 2026-07-30 from shared/Fonts/TTF. Only a .ttf is on
   disk (no woff2/woff export was generated for this one) — still works
   fine in every modern browser via @font-face, just without woff2's
   extra compression. Regular + italic cuts both included since sales-
   page/legal content sometimes needs emphasis (see .sales-page__founder-
   quote). font-weight 100–900 matches Montserrat's full variable axis. */
@font-face {
  font-family: 'Montserrat-Variable';
  src: url('/shared/Fonts/TTF/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Variable';
  src: url('/shared/Fonts/TTF/Montserrat-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

/* Brand palette — copied exactly from the original replay-tool app so every
   module (chart engine and everything built after it) stays visually
   consistent. DO NOT invent new colors; add to this list if a module
   genuinely needs one, and note why. */
:root {
  --bg:      #080F1C;
  --surface: #0E1928;
  --card:    #122035;
  --border:  #1C2E46;
  --text:    #D4E2F2;
  --sub:     #4E6A8A;

  /* Semantic colors — intentionally identical in both themes. These carry
     meaning (buy/sell, tool accents) rather than decoration, so they don't
     get re-themed the way chrome colors do. */
  --up:      #26A69A;
  --down:    #EF5350;
  --accent:  #F0A030;
  --blue:    #3A82F0;
  --draw:    #F0D030;
  --tpFill:  rgba(38,166,154,0.18);
  --slFill:  rgba(239,83,80,0.18);

  --txt-strong: #C0D4EC;
  --txt-mid:    #9FBCE0;
  --txt-soft:   #80A0C8;
  --txt-faint:  #7A9EC4;
  --press-bg:   #1C3050;
  --overlay-bg: rgba(8,15,28,0.85);

  /* Aliases so existing scaffold code (core/*, other modules) that already
     references --color-* keeps working without a rewrite. */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-dim: var(--sub);
  --color-accent: var(--blue);
  --color-success: var(--up);
  --color-danger: var(--down);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Consolas, monospace;
  /* Display typeface (Panchang) — see the @font-face comment above.
     Bold headlines/logotype only (sales-page.css, legal.css); interface
     chrome stays on --font-sans. */
  --font-display: 'Panchang-Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Body typeface (Montserrat) — paragraphs/lists/labels on content
     surfaces (sales-page.css, legal.css). See @font-face comment above. */
  --font-body: 'Montserrat-Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  /* Elevation — shared shadow steps so floating panels (dropdowns, indicator
     panels, paywall modal) stop improvising their own box-shadow per module. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.32);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.40);

  /* Radius scale — --radius (8px, above) stays the default for cards and
     module-shells. Use these for things that should read smaller/larger. */
  --radius-sm: 4px;   /* inputs, small buttons */
  --radius-lg: 14px;  /* modals, large panels e.g. paywall modal */

  /* Extended spacing — continues the 4px scale past --space-4 */
  --space-5: 32px;
  --space-6: 48px;

  /* Motion — opt-in, for consistent hover/open transitions across modules */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;

  /* Darker accent variant for text-on-accent-fill contexts. Does not replace
     --accent; --draw stays the drawing-tool yellow, --accent stays the CTA
     orange — this just gives a documented option when the two need to be
     told apart or when --accent needs more contrast against a light fill. */
  --accent-strong: #D88A1E;

  /* Text color for content sitting on top of --accent/--draw fills.
     --accent and --draw are intentionally identical in both themes (see
     the semantic-colors comment above), so this must NOT be a themed
     alias like --bg/--text — it needs to stay dark in both light and
     dark mode, matching the fills it sits on. */
  --text-on-accent: #0B0F1A;
}

/* Day / night mode — toggled via data-theme on <html>. Canvas-drawn chart
   colors can't read CSS variables, so the chart-engine module keeps its
   own parallel CHART_THEMES JS object in sync with these — see
   modules/chart-engine/chart-engine.js. */
:root[data-theme="light"] {
  --bg:      #F3F6FB;
  --surface: #FFFFFF;
  --card:    #EAF0F8;
  --border:  #CBD6E4;
  --text:    #16253A;
  --sub:     #5B7290;
  --txt-strong: #1D2E45;
  --txt-mid:    #2F5273;
  --txt-soft:   #3A6485;
  --txt-faint:  #587A9C;
  --press-bg:   #DCE7F4;
  --overlay-bg: rgba(243,246,251,0.88);

  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-text: var(--text);
  --color-text-dim: var(--sub);
}

/* Tabular numerals — apply to any element rendering OHLC prices,
   timestamps, or P&L that updates during replay, so digits don't
   shift width frame to frame. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Elevation utilities — opt-in per component, replaces ad hoc box-shadow.
   e.g. dropdowns/indicator panels: .elevate-sm/.elevate-md;
   paywall modal: .elevate-lg */
.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }

/* Visually-hidden but still present in the DOM/accessibility tree — for
   content that needs to exist in the static markup (screen readers,
   crawlers that don't execute JS) without affecting sighted layout.
   Standard clip-based technique (not display:none/visibility:hidden,
   both of which remove it from the a11y tree too). Used by app/index.html's
   static <h1> — the app shell's real interface chrome has no visible
   on-screen brand heading (it's a fixed-viewport trading app, not a
   document), but the name should still be discoverable in the raw HTML. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Consistent keyboard focus ring across every module's buttons/inputs —
   visible for keyboard users, invisible on mouse/touch click (no ring
   flash on every tap), which is what a polished desktop-grade app does. */
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;
}

.module-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-surface);
}

/* Utility: dark/light icon-swap pairs. Modules that show a themed PNG
   icon (one asset per theme, e.g. shared/icons/pen dark.png / pen
   light.png) render BOTH <img> variants and tag them with these two
   classes; only the one matching the current data-theme stays visible.
   Kept here (not per-module) since several modules need the identical
   pattern — see data-loader.html, drawing-tools.html, trading-log.html. */
.theme-icon--dark  { display: block; }
.theme-icon--light { display: none; }
:root[data-theme="light"] .theme-icon--dark  { display: none; }
:root[data-theme="light"] .theme-icon--light { display: block; }