@import "tailwindcss";

/* Enable dark mode via .dark class on html */
@custom-variant dark (&:where(.dark, .dark *));

/* Coolors palette — stays the same in both modes */
@theme {
  --color-sunny: #EDAE49;
  --color-brick: #D1495B;
  --color-seaweed: #00798C;
  --color-casual: #30638E;
  --color-indigo: #003D5B;

  /* Part A.4: chart hues — deeper steps of the same brand hues, validated for CVD/contrast.
     Brand palette (#EDAE49/#00798C/#D1495B) does NOT change; these are read only by chart marks. */
  --color-chart-income: #0090A6;
  --color-chart-fixed: #BE851F;
  --color-chart-running: #C13B4D;

  --color-brand-blue: #30638E;
  --color-brand-orange: #EDAE49;
  --color-brand-red: #D1495B;
  --color-brand-green: #00798C;
  --color-brand-purple: #8B5CF6;
  --color-brand-cyan: #00798C;
  --color-brand-pink: #D1495B;
  --color-brand-yellow: #EDAE49;

  /* Light theme (default) */
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-border: #e5e7eb;
  --color-border-soft: #f3f4f6;
  --color-text: #003D5B;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;
  --color-row-hover: rgba(0, 0, 0, 0.02);

  /* "Ink" steps — the light-mode colour for text that borrows a brand hue.
     The base brand palette above is never used as text on a light surface unless
     it clears 4.5:1; these names exist so `text-accent-ink` works in BOTH modes
     and only its value changes. See the .dark block for the dark counterparts. */
  --color-accent-ink: #30638E;
  --color-brick-ink: #D1495B;
  --color-indigo-ink: #003D5B;
}

/* Dark theme overrides */
.dark {
  --color-bg: #0f151b;
  --color-surface: #1e2732;
  --color-surface-muted: #182029;
  --color-border: #303c48;
  --color-border-soft: #26313c;
  --color-text: #e8eef4;
  --color-text-muted: #adb8c2;
  --color-text-soft: #87919a;
  --color-row-hover: rgba(255, 255, 255, 0.04);

  /* Dark "ink" steps. The base brand hues are correct as *fills* but fail WCAG AA
     as text on a dark surface (seaweed 3.6:1, casual 2.9:1, brick 3.7:1, indigo 1.6:1).
     These are lighter steps of the same hues, reaching 4.8–7.3:1. Text-only —
     never a fill — so the @theme brand palette stays untouched. */
  --color-accent-ink: #2BB0C4;
  --color-brick-ink: #E86E7E;
  --color-indigo-ink: #7FA8C9;

  /* Part A.4: dark-mode chart hues */
  --color-chart-income: #00A6BE;
  --color-chart-fixed: #BE851F;
  --color-chart-running: #D94F60;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { -webkit-font-smoothing: antialiased; }

/* Smooth color transition when toggling themes */
body, .dark body { transition: background-color 0.2s ease, color 0.2s ease; }

.recharts-cartesian-axis-tick text { fill: var(--color-text-soft); font-size: 11px; }
.recharts-cartesian-grid line { stroke: var(--color-border-soft); }
.recharts-default-tooltip {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}
.recharts-tooltip-label { color: #003D5B !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.recharts-legend-item-text { color: #6b7280 !important; font-size: 12px !important; }

.dark .recharts-default-tooltip {
  background: rgba(30, 39, 50, 0.98) !important;
  border: 1px solid #303c48 !important;
  color: #e8eef4 !important;
}
.dark .recharts-tooltip-label { color: #e8eef4 !important; }
.dark .recharts-legend-item-text { color: #adb8c2 !important; }