:root {
  /* Neutral surfaces — warm off-white family, same hue (85) as Hermes for cross-app cohesion, lifted brighter since GymFin is web-only */
  --bg: oklch(98.5% 0.004 85);
  --surface: oklch(99.5% 0.002 85);
  --surface-2: oklch(96% 0.006 85);
  --surface-hover: oklch(97% 0.005 85);
  --border: oklch(89% 0.007 85);
  --border-strong: oklch(80% 0.009 85);

  /* Text hierarchy — 3 levels */
  --text-1: oklch(22% 0.01 85);   /* primary body/labels */
  --text-2: oklch(45% 0.012 85);  /* secondary/muted */
  --text-3: oklch(62% 0.01 85);   /* tertiary/placeholder/disabled */
  --text-on-accent: oklch(99% 0 0);

  /* Primary brand — same accent hue as Hermes (258, blue) */
  --color-primary: oklch(53% 0.17 258);
  --color-primary-hover: oklch(46% 0.17 258);
  --color-primary-active: oklch(41% 0.17 258);
  --color-primary-soft: oklch(94% 0.03 258);

  /* Secondary — muted slate-blue, lower emphasis brand accents (chart series, secondary highlights) */
  --color-secondary: oklch(50% 0.035 258);
  --color-secondary-soft: oklch(94% 0.012 258);

  /* Accent — warm neutral highlight, shares Hermes' warning hue (75/85); used for Salarios/payroll tint */
  --color-accent: oklch(58% 0.135 82);
  --color-accent-soft: oklch(94.5% 0.05 85);
  --color-accent-strong: oklch(46% 0.13 75);

  /* Semantic: positive / income */
  --color-success: oklch(52% 0.14 150);
  --color-success-hover: oklch(46% 0.14 150);
  --color-success-soft: oklch(94% 0.05 150);
  --color-success-strong: oklch(40% 0.13 150);

  /* Semantic: negative / expense */
  --color-danger: oklch(53% 0.19 25);
  --color-danger-hover: oklch(47% 0.19 25);
  --color-danger-soft: oklch(94.5% 0.05 25);
  --color-danger-strong: oklch(43% 0.19 25);

  /* Semantic: info (rarely used — inline hints) */
  --color-info: oklch(55% 0.13 235);
  --color-info-soft: oklch(94% 0.03 235);

  --focus-ring: oklch(53% 0.17 258 / 0.35);
  --backdrop: oklch(20% 0.01 85 / 0.45);
}

[data-theme="dark"] {
  --bg: oklch(16% 0.004 85);
  --surface: oklch(19% 0.003 85);
  --surface-2: oklch(23% 0.005 85);
  --surface-hover: oklch(22% 0.004 85);
  --border: oklch(28% 0.006 85);
  --border-strong: oklch(35% 0.008 85);

  --text-1: oklch(92% 0.01 85);
  --text-2: oklch(68% 0.012 85);
  --text-3: oklch(50% 0.01 85);
  --text-on-accent: oklch(10% 0 0);

  --color-primary: oklch(65% 0.17 258);
  --color-primary-hover: oklch(58% 0.17 258);
  --color-primary-active: oklch(52% 0.17 258);
  --color-primary-soft: oklch(25% 0.04 258);

  --color-secondary: oklch(60% 0.035 258);
  --color-secondary-soft: oklch(25% 0.015 258);

  --color-accent: oklch(65% 0.13 82);
  --color-accent-soft: oklch(25% 0.06 85);
  --color-accent-strong: oklch(70% 0.12 75);

  --color-success: oklch(60% 0.14 150);
  --color-success-hover: oklch(54% 0.14 150);
  --color-success-soft: oklch(22% 0.06 150);
  --color-success-strong: oklch(68% 0.12 150);

  --color-danger: oklch(60% 0.19 25);
  --color-danger-hover: oklch(54% 0.19 25);
  --color-danger-soft: oklch(22% 0.06 25);
  --color-danger-strong: oklch(68% 0.18 25);

  --color-info: oklch(60% 0.13 235);
  --color-info-soft: oklch(22% 0.04 235);

  --focus-ring: oklch(65% 0.17 258 / 0.4);
  --backdrop: oklch(0% 0 0 / 0.55);
}