/* Kinetic Ledger design tokens — shared across Money Engine */

:root {
  /* Surfaces */
  --bg: #f9f9ff;
  --panel: #ffffff;
  --panel-soft: #f3f4f6;
  --chart-bg: #ffffff;
  --surface-container-low: #f1f3ff;
  --surface-alt: #f3f4f6;

  /* Text */
  --text: #141b2b;
  --muted: #6b7280;
  --topbar-text: #141b2b;

  /* Brand */
  --accent: #1b2b3a;
  --accent-secondary: #2d5a27;
  --accent-mint: #e8f5e9;
  --btn-primary: #1b2b3a;
  --btn-secondary: #1b2b3a;
  --btn-tertiary: #43474c;
  --ok: #2d5a27;
  --on-primary: #ffffff;

  /* Topbar */
  --topbar-bg: #ffffff;
  --topbar-border: rgba(107, 114, 128, 0.15);

  /* Borders & elevation */
  --border: rgba(107, 114, 128, 0.15);
  --border-strong: rgba(107, 114, 128, 0.3);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-float: 0 4px 20px rgba(27, 43, 58, 0.08);

  /* Inputs */
  --input-bg: #ffffff;
  --input-text: #141b2b;

  /* Status / semantic */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --table-row-invalid-bg: #ffdad6;
  --table-row-invalid-text: #93000a;
  --projection-outflow-text: #a84848;
  --goal-invalid-bg: #ffdad6;
  --goal-invalid-text: #93000a;
  --row-retired-bg: rgba(45, 90, 39, 0.08);
  --row-retired-text: var(--text);
  --row-retired-border: rgba(45, 90, 39, 0.35);

  /* Countdown panel */
  --countdown-panel-bg: linear-gradient(135deg, #e8f5e9 0%, #f1f3ff 100%);
  --countdown-panel-border: rgba(45, 90, 39, 0.25);
  --countdown-card-bg: #ffffff;
  --countdown-card-border: rgba(107, 114, 128, 0.15);
  --countdown-value: #1b2b3a;
  --countdown-heading: #141b2b;
  --countdown-label: #2d5a27;
  --countdown-goal-label: #1b2b3a;

  /* Modals */
  --modal-overlay-bg: rgba(20, 27, 43, 0.45);
  --modal-panel-bg: #ffffff;
  --modal-panel-border: rgba(107, 114, 128, 0.2);
  --modal-panel-shadow: var(--shadow-float);

  /* Footer */
  --footer-bg: #1b2b3a;
  --footer-text: #edf0ff;
  --footer-muted: #8292a5;

  /* Typography scale */
  --font-display-size: 2rem;
  --font-display-weight: 600;
  --font-headline-size: 1.5rem;
  --font-headline-weight: 600;
  --font-body-size: 1rem;
  --font-body-lh: 1.5;
  --font-label-sm-size: 0.75rem;
  --font-label-sm-weight: 600;
  --font-label-sm-spacing: 0.05em;

  /* Layout */
  --container-max: 1280px;
  --gutter: 24px;
  --gutter-mobile: 16px;

  /* Charts (shared across tools) */
  --chart-series-primary: #2563eb;
  --chart-series-secondary: #059669;
  --chart-series-muted: #64748b;
  --chart-axis: #64748b;
  --chart-tick: #475569;
  --chart-category-1: #2563eb;
  --chart-category-2: #059669;
  --chart-category-3: #7c3aed;
  --chart-category-4: #d97706;
  --chart-category-5: #db2777;
  --chart-category-6: #0891b2;
  --chart-category-7: #64748b;
}

:root[data-theme="dark"] {
  --bg: #141b2b;
  --panel: #293040;
  --panel-soft: #212c24;
  --chart-bg: #293040;
  --surface-container-low: #1b2b3a;
  --surface-alt: #293040;

  --text: #edf0ff;
  --muted: #8292a5;
  --topbar-text: #edf0ff;

  --accent: #b8c8dc;
  --accent-secondary: #a1d494;
  --accent-mint: rgba(185, 238, 171, 0.12);
  --btn-primary: #1b2b3a;
  --btn-secondary: #384858;
  --btn-tertiary: #87948a;
  --ok: #a1d494;
  --on-primary: #edf0ff;

  --topbar-bg: #1b2b3a;
  --topbar-border: rgba(184, 200, 220, 0.12);

  --border: rgba(184, 200, 220, 0.12);
  --border-strong: rgba(184, 200, 220, 0.25);
  --shadow-float: 0 4px 20px rgba(0, 0, 0, 0.35);

  --input-bg: #293040;
  --input-text: #edf0ff;

  --error: #ffb4ab;
  --error-container: #93000a;
  --table-row-invalid-bg: rgba(186, 26, 26, 0.15);
  --table-row-invalid-text: #ffb4ab;
  --projection-outflow-text: #e8a8a0;
  --goal-invalid-bg: rgba(186, 26, 26, 0.15);
  --goal-invalid-text: #ffb4ab;
  --row-retired-bg: rgba(161, 212, 148, 0.1);
  --row-retired-text: var(--text);
  --row-retired-border: rgba(161, 212, 148, 0.35);

  --countdown-panel-bg: linear-gradient(135deg, #212c24 0%, #1b2b3a 100%);
  --countdown-panel-border: rgba(161, 212, 148, 0.25);
  --countdown-card-bg: #293040;
  --countdown-card-border: rgba(184, 200, 220, 0.12);
  --countdown-value: #b8c8dc;
  --countdown-heading: #edf0ff;
  --countdown-label: #a1d494;
  --countdown-goal-label: #edf0ff;

  --modal-overlay-bg: rgba(5, 22, 37, 0.75);
  --modal-panel-bg: #293040;
  --modal-panel-border: rgba(184, 200, 220, 0.15);
  --modal-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  --footer-bg: #051625;
  --footer-text: #edf0ff;
  --footer-muted: #8292a5;

  --chart-series-primary: #38bdf8;
  --chart-series-secondary: #34d399;
  --chart-series-muted: #94a3b8;
  --chart-axis: #94a3b8;
  --chart-tick: #cbd5e1;
  --chart-category-1: #38bdf8;
  --chart-category-2: #34d399;
  --chart-category-3: #a78bfa;
  --chart-category-4: #fbbf24;
  --chart-category-5: #f472b6;
  --chart-category-6: #22d3ee;
  --chart-category-7: #94a3b8;
}

/* Reading-comfort presets (Irlen / Meares-Irlen syndrome, dyslexia, visual stress).
   Placed after the dark theme block so these override both light and dark themes
   when html[data-reading-mode="..."] is set. Backgrounds are pastel tints and
   text is an off-black to avoid pure #000 on #FFF halation effects, following
   Irlen Institute and British Dyslexia Association guidance. All foreground/
   background pairings meet WCAG 2.2 AA contrast (>= 4.5:1) for body text. */

:root[data-reading-mode="cream"] {
  --bg: #fbf3df;
  --panel: #fffaef;
  --panel-soft: #f6ecd0;
  --chart-bg: #fffaef;
  --surface-container-low: #f6ecd0;
  --surface-alt: #f1e6c5;

  --text: #2b2725;
  --muted: #5b524d;
  --topbar-text: #2b2725;

  --topbar-bg: #fffaef;
  --topbar-border: rgba(91, 82, 77, 0.2);

  --border: rgba(91, 82, 77, 0.2);
  --border-strong: rgba(91, 82, 77, 0.35);

  --input-bg: #fffaef;
  --input-text: #2b2725;
}

:root[data-reading-mode="peach"] {
  --bg: #fce7d4;
  --panel: #fff1e2;
  --panel-soft: #f7dcc1;
  --chart-bg: #fff1e2;
  --surface-container-low: #f7dcc1;
  --surface-alt: #f2d2b1;

  --text: #2b2725;
  --muted: #6b554a;
  --topbar-text: #2b2725;

  --topbar-bg: #fff1e2;
  --topbar-border: rgba(107, 85, 74, 0.22);

  --border: rgba(107, 85, 74, 0.22);
  --border-strong: rgba(107, 85, 74, 0.38);

  --input-bg: #fff1e2;
  --input-text: #2b2725;
}

:root[data-reading-mode="yellow"] {
  --bg: #fdf3c2;
  --panel: #fefae8;
  --panel-soft: #f6e9a6;
  --chart-bg: #fefae8;
  --surface-container-low: #f6e9a6;
  --surface-alt: #f2e29a;

  --text: #2b2725;
  --muted: #5e5530;
  --topbar-text: #2b2725;

  --topbar-bg: #fefae8;
  --topbar-border: rgba(94, 85, 48, 0.22);

  --border: rgba(94, 85, 48, 0.22);
  --border-strong: rgba(94, 85, 48, 0.38);

  --input-bg: #fefae8;
  --input-text: #2b2725;
}

:root[data-reading-mode="green"] {
  --bg: #d6ecd2;
  --panel: #e8f4e4;
  --panel-soft: #c4e0bf;
  --chart-bg: #e8f4e4;
  --surface-container-low: #c4e0bf;
  --surface-alt: #bcd9b6;

  --text: #1f2b1d;
  --muted: #4a5c46;
  --topbar-text: #1f2b1d;

  --topbar-bg: #e8f4e4;
  --topbar-border: rgba(74, 92, 70, 0.22);

  --border: rgba(74, 92, 70, 0.22);
  --border-strong: rgba(74, 92, 70, 0.38);

  --input-bg: #e8f4e4;
  --input-text: #1f2b1d;
}

:root[data-reading-mode="blue"] {
  --bg: #d4e4f4;
  --panel: #e5eff8;
  --panel-soft: #bdd3ec;
  --chart-bg: #e5eff8;
  --surface-container-low: #bdd3ec;
  --surface-alt: #b3cae5;

  --text: #1d2433;
  --muted: #4a5870;
  --topbar-text: #1d2433;

  --topbar-bg: #e5eff8;
  --topbar-border: rgba(74, 88, 112, 0.22);

  --border: rgba(74, 88, 112, 0.22);
  --border-strong: rgba(74, 88, 112, 0.38);

  --input-bg: #e5eff8;
  --input-text: #1d2433;
}

:root[data-reading-mode="pink"] {
  --bg: #f5d8e3;
  --panel: #fbe7ee;
  --panel-soft: #efc6d4;
  --chart-bg: #fbe7ee;
  --surface-container-low: #efc6d4;
  --surface-alt: #e9bdce;

  --text: #2d1e26;
  --muted: #6b4c5b;
  --topbar-text: #2d1e26;

  --topbar-bg: #fbe7ee;
  --topbar-border: rgba(107, 76, 91, 0.22);

  --border: rgba(107, 76, 91, 0.22);
  --border-strong: rgba(107, 76, 91, 0.38);

  --input-bg: #fbe7ee;
  --input-text: #2d1e26;
}