@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@500;600;700&display=swap");
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@variant dark (&:where(.dark, .dark *));

/* === Semantic Design Tokens ===
   Light values in :root, dark values in .dark.
   Components use `bg-surface-base`, `text-primary`, `border-default` — no dark: prefix needed.
   To swap the dark palette, edit ONLY the .dark block below.
*/

:root {
  /* Surfaces */
  --surface-body: #f9fafb;
  --surface-base: #ffffff;
  --surface-elevated: #f9fafb;
  --surface-hover: #f3f4f6;
  --surface-overlay: #ffffff;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --text-on-emphasis: #ffffff;

  /* Borders */
  --border-default: rgba(229, 231, 235, 0.8);
  --border-strong: #d1d5db;
  --border-muted: rgba(229, 231, 235, 0.6);

  /* Shadows */
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Focus */
  --ring-offset-bg: #ffffff;

  /* KPI card accent border — use this CSS var instead of --brand-accent directly so dark mode can override */
  --kpi-card-border-color: var(--brand-accent);

  /* Brand primary as TEXT color — same as --brand-primary in light, readable lavender in dark */
  --brand-text-color: var(--brand-primary, var(--color-plum));
}

.dark {
  /* Surfaces — Plum Dusk */
  --surface-body: #0e0a0d;
  --surface-base: #19121a;
  --surface-elevated: #221a24;
  --surface-hover: #2c2030;
  --surface-overlay: #221a24;

  /* Text — Plum Dusk */
  --text-primary: #f0eaf2;
  --text-secondary: #b09abc;
  --text-muted: #7a6885;
  --text-faint: #7a6885;
  --text-on-emphasis: #ffffff;

  /* Borders — Plum Dusk */
  --border-default: #352a3a;
  --border-strong: #4a3a52;
  --border-muted: #352a3a;

  /* Shadows — removed for cards in dark mode (use ring for definition instead), kept for overlays */
  --shadow-card: none;
  --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

  /* Focus */
  --ring-offset-bg: #0e0a0d;

  /* KPI card — suppress accent border in dark mode, ring provides definition */
  --kpi-card-border-color: transparent;

  /* Brand primary as TEXT color — lavender is readable on Plum Dusk surfaces */
  --brand-text-color: var(--color-lavender);
}

@theme {
  /* === Brand Primary: Plum === */
  --color-plum: #7A2B5B;
  --color-plum-light: #F3E8EE;
  --color-plum-dark: #5C1F44;

  /* === Brand Secondary: Sage === */
  --color-sage: #8DB88E;
  --color-sage-light: #E2EDDA;
  --color-sage-dark: #5A7D5B;

  /* === Brand Accent: Lavender === */
  --color-lavender: #B5A7C2;
  --color-lavender-light: #EDE8F2;
  --color-lavender-dark: #8A7A9A;

  /* === Brand Neutral: Forest === */
  --color-forest: #17301c;
  --color-forest-medium: #7eb285;
  --color-forest-light: #EDFBE2;
  --color-forest-soft: #D5EAD8;

  /* === Semantic Surface Colors === */
  --color-surface-body: var(--surface-body);
  --color-surface-base: var(--surface-base);
  --color-surface-elevated: var(--surface-elevated);
  --color-surface-hover: var(--surface-hover);
  --color-surface-overlay: var(--surface-overlay);

  /* === Semantic Text Colors === */
  --color-content-primary: var(--text-primary);
  --color-content-secondary: var(--text-secondary);
  --color-content-muted: var(--text-muted);
  --color-content-faint: var(--text-faint);
  --color-content-on-emphasis: var(--text-on-emphasis);

  /* === Semantic Border Colors === */
  --color-border-default: var(--border-default);
  --color-border-strong: var(--border-strong);
  --color-border-muted: var(--border-muted);

  /* === Semantic Shadows === */
  --shadow-card: var(--shadow-card);
  --shadow-elevated: var(--shadow-elevated);

  /* === Typography === */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}