/*
 * styles-1-base-and-themes.css
 *
 * Theme tokens, color palette, base resets, micro-content-reveal animation.
 *
 * Phase 5 S3 pass-2: extracted from the monolithic styles.css
 * (8 286 LOC) to bring every CSS source file under the < 1 500
 * LOC bar. Load order in index.html preserves the original
 * cascade exactly: this file occupies lines 1 - 381 of the
 * pre-split styles.css.
 */

/*
  Theme tokens: html[data-theme] = light | midnight | nord | solarized | (auto resolves to light/midnight).
  Executive Minimalist default = zinc/slate neutrals + indigo accent (#6366f1).
*/
:root {
  color-scheme: light;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f4f4f5;
  --text: #18181b;
  /*
   * Body-text muted token. Must meet WCAG AA 4.5:1 against --bg (#fafafa)
   * AND --surface (#ffffff) for small text. slate-500 (#64748b) ~ 4.37:1
   * — Phase 0 P1-017 measured 4.19:1 in production paint, just under the
   * AA threshold. Darkened to slate-600 (#475569) → ~6.33:1 (clears AA
   * with margin, approaches AAA 7.0). midnight / nord / solarized
   * --muted values were re-checked in the same slice and pass; see
   * docs/program/Phase1-Progress-2026-05-22.md.
   */
  --muted: #475569;
  --primary: #18181b;
  --accent: #6366f1;
  --primary-soft: #eef2ff;
  --warn: #b45309;
  --shadow: 0 4px 24px rgba(24, 24, 27, 0.06), 0 1px 3px rgba(24, 24, 27, 0.04);
  --shadow-hover: 0 12px 40px rgba(24, 24, 27, 0.1), 0 4px 12px rgba(24, 24, 27, 0.06);
  --shadow-tight: 0 2px 8px rgba(24, 24, 27, 0.06);
  /*
   * Card surfaces — 3 elevations + corner tiers (mobile-first).
   * L1 subtle (nested chips), L2 standard (dashboard tiles), L3 hero (Today’s Brief).
   */
  --radius-card-primary: 16px;
  --radius-card-secondary: 12px;
  --radius: var(--radius-card-primary);
  --radius-shell: 20px;
  --card-elev-subtle: 0 1px 2px rgba(24, 24, 27, 0.05), 0 2px 10px rgba(24, 24, 27, 0.06);
  --card-elev-standard: 0 2px 10px rgba(24, 24, 27, 0.07), 0 6px 22px rgba(24, 24, 27, 0.08);
  --card-elev-highlight: 0 4px 16px rgba(24, 24, 27, 0.1), 0 12px 36px rgba(99, 102, 241, 0.13);
  --card-elev-hover: 0 4px 14px rgba(24, 24, 27, 0.1), 0 10px 28px rgba(24, 24, 27, 0.09);
  --card-padding: 1.125rem;
  --gap-tiles: clamp(1rem, 0.75rem + 0.8vw, 1.35rem);
  --accent-soft: rgba(99, 102, 241, 0.12);
  --border: #e4e4e7;
  --border-subtle: #f4f4f5;
  --prefs-toggle-hover: #e4e4e7;
  --chip-border: #e4e4e7;
  --chip-bg: #fafafa;
  --sparkline-color: #a1a1aa;
  --reason-toggle-border: #e4e4e7;
  --reason-toggle-bg: #f4f4f5;
  --reason-toggle-text: #3f3f46;
  --stock-up: #059669;
  --stock-down: #dc2626;
  --hour-border: #e4e4e7;
  --hour-bg: #fafafa;
  --news-tile-border: #e4e4e7;
  --news-tile-bg: #fafafa;
  --news-summary: #27272a;
  --view-more-border: #d4d4d8;
  --view-more-bg: #f4f4f5;
  --view-more-text: #4338ca;
  --refresh-bg: #18181b;
  --refresh-fg: #fafafa;
  --btn-solid-bg: #27272a;
  --btn-solid-fg: #fafafa;
  --btn-solid-hover: #3f3f46;
  --ghost-border: #e4e4e7;
  --ghost-bg: #ffffff;
  --ghost-text: #18181b;
  --scrollbar-thumb: #d4d4d8;
  --scrollbar-track: #f4f4f5;
  --status-error-bg: #fef3c7;
  --hint-prefix-color: #dc2626;

  /*
   * Typography scale (targets — Title 20–22px semibold, Section 16–18 medium,
   * Body 13–14 regular, Meta 11–12 regular). Pair with --text-secondary / --text-meta for WCAG AA.
   */
  --type-title: clamp(1.25rem, 1.16rem + 0.32vw, 1.375rem);
  --type-section: clamp(1rem, 0.95rem + 0.18vw, 1.125rem);
  --type-body: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --type-meta: clamp(0.6875rem, 0.64rem + 0.1vw, 0.75rem);
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-data: 600;

  /*
   * Semantic text hierarchy (~65–72% perceived emphasis vs primary text; solid colors for AA).
   */
  --text-secondary: #3f3f46;
  --text-meta: #52525b;

  /*
   * Design system layer (theme-agnostic): 8pt spacing, type steps, motion, a11y.
   * Prefer these tokens in new/refactored rules; legacy rules still use ad-hoc values.
   */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --font-size-xs: var(--type-meta);
  --font-size-sm: var(--type-body);
  --font-size-base: var(--type-body);
  --font-size-md: var(--type-section);
  --font-size-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --font-line-tight: 1.2;
  --font-line-snug: 1.35;
  --font-line-normal: 1.45;
  --font-line-relaxed: 1.55;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --focus-ring-color: var(--accent);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  /* Material 3 baseline tap target — matches Android Spacing.touchTargetMin
   * (48.dp) and JS SPACING_PX.touchTargetMin. Reconciled to 48 px in
   * Phase 4 S1; pinned by tests/design-tokens-parity.test.mjs. */
  --touch-target-min: 48px;
  --radius-sm: 8px;
  --radius-md: var(--radius-card-secondary);
  --radius-lg: var(--radius);
  /* Micro-interactions: transform/opacity only for compositor-friendly motion */
  --micro-tap-scale: 0.97;
  --micro-tap-press-ms: 95ms;
  --micro-tap-release-ms: 240ms;
  --ease-micro-press: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-micro-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --duration-card-motion: 260ms;
  /* Elevation steps (alias card system for legacy rules) */
  --elev-0: none;
  --elev-1: var(--card-elev-subtle);
  --elev-2: var(--card-elev-standard);
  --elev-3: var(--card-elev-highlight);
}

/* Midnight — OLED-friendly deep charcoal */
html[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #09090b;
  --surface: #18181b;
  --surface-alt: #27272a;
  --text: #fafafa;
  --muted: #a1a1aa;
  --text-secondary: #d4d4d8;
  --text-meta: #a1a1aa;
  --primary: #fafafa;
  --accent: #818cf8;
  --primary-soft: #27272a;
  --warn: #fbbf24;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-tight: 0 4px 14px rgba(0, 0, 0, 0.35);
  --accent-soft: rgba(129, 140, 248, 0.18);
  --border: #3f3f46;
  --border-subtle: #27272a;
  --prefs-toggle-hover: #3f3f46;
  --chip-border: #3f3f46;
  --chip-bg: #18181b;
  --sparkline-color: #71717a;
  --reason-toggle-border: #3f3f46;
  --reason-toggle-bg: #27272a;
  --reason-toggle-text: #d4d4d8;
  --stock-up: #34d399;
  --stock-down: #f87171;
  --hour-border: #3f3f46;
  --hour-bg: #18181b;
  --news-tile-border: #3f3f46;
  --news-tile-bg: #18181b;
  --news-summary: #fafafa;
  --view-more-border: #52525b;
  --view-more-bg: #27272a;
  --view-more-text: #a5b4fc;
  --refresh-bg: #e4e4e7;
  --refresh-fg: #18181b;
  --btn-solid-bg: #e4e4e7;
  --btn-solid-fg: #18181b;
  --btn-solid-hover: #d4d4d8;
  --ghost-border: #3f3f46;
  --ghost-bg: #27272a;
  --ghost-text: #fafafa;
  --scrollbar-thumb: #52525b;
  --scrollbar-track: #27272a;
  --status-error-bg: #451a1a;
  --hint-prefix-color: #fca5a5;
  --card-elev-subtle: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.4);
  --card-elev-standard: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.38);
  --card-elev-highlight: 0 4px 20px rgba(0, 0, 0, 0.55), 0 12px 40px rgba(129, 140, 248, 0.16);
  --card-elev-hover: 0 4px 18px rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.42);
}

/* Nord — cool blue-gray “Arctic” */
html[data-theme="nord"] {
  color-scheme: dark;
  --bg: #2e3440;
  --surface: #3b4252;
  --surface-alt: #434c5e;
  --text: #eceff4;
  --muted: #d8dee9;
  --text-secondary: #e5e9f0;
  --text-meta: #d8dee9;
  --primary: #eceff4;
  --accent: #88c0d0;
  --primary-soft: #434c5e;
  --warn: #ebcb8b;
  --shadow: 0 12px 36px rgba(46, 52, 64, 0.55), 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-hover: 0 18px 48px rgba(46, 52, 64, 0.6), 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-tight: 0 6px 18px rgba(0, 0, 0, 0.28);
  --accent-soft: rgba(136, 192, 208, 0.18);
  --border: #4c566a;
  --border-subtle: #434c5e;
  --prefs-toggle-hover: #4c566a;
  --chip-border: #4c566a;
  --chip-bg: #2e3440;
  --sparkline-color: #aeb3bb;
  --reason-toggle-border: #4c566a;
  --reason-toggle-bg: #3b4252;
  --reason-toggle-text: #e5e9f0;
  --stock-up: #a3be8c;
  --stock-down: #bf616a;
  --hour-border: #4c566a;
  --hour-bg: #2e3440;
  --news-tile-border: #4c566a;
  --news-tile-bg: #2e3440;
  --news-summary: #eceff4;
  --view-more-border: #5e81ac;
  --view-more-bg: #3b4252;
  --view-more-text: #8fbcbb;
  --refresh-bg: #eceff4;
  --refresh-fg: #2e3440;
  --btn-solid-bg: #eceff4;
  --btn-solid-fg: #2e3440;
  --btn-solid-hover: #d8dee9;
  --ghost-border: #4c566a;
  --ghost-bg: #434c5e;
  --ghost-text: #eceff4;
  --scrollbar-thumb: #4c566a;
  --scrollbar-track: #3b4252;
  --status-error-bg: #4c2f2f;
  --hint-prefix-color: #bf616a;
  --card-elev-subtle: 0 1px 3px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.28);
  --card-elev-standard: 0 2px 10px rgba(0, 0, 0, 0.38), 0 7px 22px rgba(0, 0, 0, 0.3);
  --card-elev-highlight: 0 4px 16px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(136, 192, 208, 0.14);
  --card-elev-hover: 0 4px 14px rgba(0, 0, 0, 0.42), 0 10px 28px rgba(0, 0, 0, 0.34);
}

/* Solarized Light — low-contrast, long-session friendly */
html[data-theme="solarized"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --surface: #eee8d5;
  --surface-alt: #fdf6e3;
  --text: #657b83;
  /*
   * Solarized's spec `base1` (#93a1a1) is the canonical "secondary content"
   * color but fails WCAG AA against `base3` (~2.52:1). For accessibility
   * parity with the other themes we use Solarized `base01` (#586e75)
   * here, which clears AA (~5.28:1). It IS the same value as
   * `--text-secondary` below — that's a deliberate palette compromise:
   * Solarized's design encodes "long-session low-contrast" as a feature,
   * but the prompt's accessibility bar is non-negotiable. Re-evaluate in
   * Phase 5 if we ship a "Solarized authentic" toggle.
   * (P1-017 in docs/program/Phase0-BaselineAudit-2026-05-22.md.)
   */
  --muted: #586e75;
  --text-secondary: #586e75;
  --text-meta: #657b83;
  --primary: #586e75;
  --accent: #268bd2;
  --primary-soft: #eee8d5;
  --warn: #cb4b16;
  --shadow: 0 4px 20px rgba(88, 110, 117, 0.08), 0 1px 3px rgba(88, 110, 117, 0.06);
  --shadow-hover: 0 12px 36px rgba(88, 110, 117, 0.12), 0 4px 12px rgba(88, 110, 117, 0.08);
  --shadow-tight: 0 2px 8px rgba(88, 110, 117, 0.07);
  --accent-soft: rgba(38, 139, 210, 0.15);
  --border: #e2d8be;
  --border-subtle: #fdf6e3;
  --prefs-toggle-hover: #e2d8be;
  --chip-border: #e2d8be;
  --chip-bg: #fdf6e3;
  --sparkline-color: #93a1a1;
  --reason-toggle-border: #e2d8be;
  --reason-toggle-bg: #eee8d5;
  --reason-toggle-text: #586e75;
  --stock-up: #859900;
  --stock-down: #dc322f;
  --hour-border: #e2d8be;
  --hour-bg: #fdf6e3;
  --news-tile-border: #e2d8be;
  --news-tile-bg: #fdf6e3;
  --news-summary: #586e75;
  --view-more-border: #93a1a1;
  --view-more-bg: #eee8d5;
  --view-more-text: #268bd2;
  --refresh-bg: #586e75;
  --refresh-fg: #fdf6e3;
  --btn-solid-bg: #586e75;
  --btn-solid-fg: #fdf6e3;
  --btn-solid-hover: #657b83;
  --ghost-border: #e2d8be;
  --ghost-bg: #fdf6e3;
  --ghost-text: #586e75;
  --scrollbar-thumb: #cfc09a;
  --scrollbar-track: #eee8d5;
  --status-error-bg: #ffe8d9;
  --hint-prefix-color: #dc322f;
  --card-elev-subtle: 0 1px 2px rgba(88, 110, 117, 0.07), 0 2px 8px rgba(88, 110, 117, 0.06);
  --card-elev-standard: 0 2px 8px rgba(88, 110, 117, 0.09), 0 6px 18px rgba(88, 110, 117, 0.08);
  --card-elev-highlight: 0 4px 14px rgba(88, 110, 117, 0.11), 0 12px 32px rgba(38, 139, 210, 0.12);
  --card-elev-hover: 0 4px 12px rgba(88, 110, 117, 0.11), 0 10px 24px rgba(88, 110, 117, 0.09);
}

* {
  box-sizing: border-box;
}

/* Screen-reader only (keeps accessible name when heading text is hidden visually) */
.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;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition:
    background-color var(--duration-slow) var(--ease-standard),
    color var(--duration-slow) var(--ease-standard);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    "Inter",
    "Noto Sans Devanagari",
    "Noto Sans Gujarati",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: var(--type-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-normal);
  transition:
    background var(--duration-slow) var(--ease-standard),
    color var(--duration-slow) var(--ease-standard);
  background:
    radial-gradient(ellipse 78% 52% at 96% -6%, rgba(99, 102, 241, 0.07), transparent 52%),
    radial-gradient(ellipse 56% 46% at 0% 102%, rgba(99, 102, 241, 0.05), transparent 48%),
    var(--bg);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    transition: none;
  }

  body {
    transition: none;
  }
}