/* ==========================================================================
   Tokens are declared on both <html> and <body>. A token that refers to
   another (--color-nav: var(--color-primary)) is resolved on the element
   where it is declared, so declaring them on body as well lets the .dark
   overrides below reach every alias. Charts read the tokens from <html>,
   which carries the theme class too.
   ========================================================================== */

:root,
body {
  /* ==========================================================================
     Design System - Semantic Colors
     Using Tailwind Colors (stone for neutrals, lime for accent)
     ========================================================================== */

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ==========================================================================
     Typography & Text
     ========================================================================== */
  --color-primary: var(--stone-600);
  --color-darker: var(--stone-800);
  --color-muted: var(--stone-400);
  --color-lighter: var(--stone-400);

  /* ==========================================================================
     Links
     ========================================================================== */
  --link: var(--lime-800);
  --link-hover: var(--violet-800);

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-nav: var(--stone-200);
  --background-body: var(--stone-100);
  --background-control: var(--stone-150);
  --background-section: var(--stone-100);
  --background-light: var(--stone-50);

  /* ==========================================================================
     Navigation
     ========================================================================== */
  --color-nav: var(--color-primary);
  --background-nav-tab-active: var(--background-body);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--stone-100);
  --button-primary-color: var(--color-primary);
  --button-primary-border: var(--border-medium);
  --button-secondary-background: var(--background-body);
  --button-secondary-color: var(--color-primary);
  --button-secondary-border: var(--border-medium);

  /* ==========================================================================
     Forms & Inputs
     ========================================================================== */
  --input-border: var(--stone-500);
  --input-border-focus: var(--violet-700);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-700);
  --input-disabled-background: var(--stone-200);
  --input-disabled-color: var(--stone-700);
  --checkbox-checked: var(--violet-800);
  --toggle-checked: var(--violet-800);

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --border-light: var(--stone-200);
  --border-medium: var(--stone-300);
  --border-dark: var(--stone-700);

  /* ==========================================================================
     Selection & Active States
     ========================================================================== */
  --selected-background: var(--violet-100);
  --selected-color: var(--stone-600);
  --selected-border: var(--stone-300);

  /* ==========================================================================
     Status & Feedback
     ========================================================================== */
  --urgent: var(--orange-950);
  --warning: var(--orange-700);
  --success: var(--lime-900);
  --error: var(--orange-900);
  --error-background: var(--orange-200);

  /* ==========================================================================
     Financial
     ========================================================================== */
  --credit: var(--green-700);

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--background-control);
  --label-green: var(--lime-200);
  --label-orange: var(--orange-200);
  --label-purple: var(--lime-200);
  --label-red: var(--red-200);
  --label-yellow: var(--yellow-200);

  /* ==========================================================================
     Icons
     ========================================================================== */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--violet-700);
  --icon-yellow: var(--yellow-900);
  --add: var(--link);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-gray: var(--background-control);
  --hl-blue: var(--blue-100);
  --hl-green: var(--lime-100);
  --hl-orange: var(--orange-100);
  --hl-violet: var(--violet-100);
  --hl-red: var(--red-100);
  --hl-yellow: var(--yellow-100);

  /* ==========================================================================
     Charts
     ========================================================================== */
  --chart-income: var(--lime-500);
  --chart-expense: var(--red-500);
  --chart-border: var(--stone-500);
  --chart-fill: var(--stone-300);
  --chart-1: var(--lime-500);
  --chart-2: var(--yellow-500);
  --chart-3: var(--blue-500);
  --chart-4: var(--orange-500);
  --chart-5: var(--red-500);
  --chart-6: var(--violet-500);

  /* ==========================================================================
     Fonts
     ========================================================================== */
  --font-sans: 'Open Sans', sans-serif;
  --font-mono: 'Courier Prime', ui-monospace, monospace;

  /* ==========================================================================
     Focus
     ========================================================================== */
  --focus-ring: var(--lime-600);

  /* ==========================================================================
     Aliases used by app stylesheets
     ========================================================================== */
  --color-credit: var(--credit);
  --color-debit: var(--error);
  --color-text-muted: var(--color-muted);
  --background-table-alt: var(--background-control);
  --success-hover: var(--lime-700);

  /* Step aliases (1-12 scale) onto the palette */
  --lime-3: var(--lime-100);
  --lime-4: var(--lime-200);
  --lime-5: var(--lime-300);
  --lime-9: var(--lime-700);
  --lime-10: var(--lime-800);
  --red-3: var(--red-100);
  --red-4: var(--red-200);
  --red-5: var(--red-300);
  --red-10: var(--red-800);
  --yellow-3: var(--yellow-100);
}

/* ==========================================================================
   Dark Mode
   Applied when .dark is on <html> and <body> (rendered from user.theme).
   Stone neutrals from dark to light, lime accents lightened for contrast.
   ========================================================================== */

.dark {
  color-scheme: dark;

  /* Typography & Text */
  --color-primary: var(--stone-300);
  --color-darker: var(--stone-100);
  --color-muted: var(--stone-500);
  --color-lighter: var(--stone-500);

  /* Links */
  --link: var(--lime-400);
  --link-hover: var(--lime-300);

  /* Backgrounds */
  --background-nav: var(--stone-950);
  --background-body: var(--stone-900);
  --background-control: var(--stone-800);
  --background-section: var(--stone-900);
  --background-light: var(--stone-800);

  /* Buttons */
  --button-primary-background: var(--stone-800);

  /* Forms & Inputs */
  --input-border: var(--stone-600);
  --input-border-focus: var(--lime-500);
  --input-background: var(--stone-800);
  --input-placeholder: var(--stone-400);
  --input-disabled-background: var(--stone-900);
  --input-disabled-color: var(--stone-500);
  --checkbox-checked: var(--lime-500);
  --toggle-checked: var(--lime-500);

  /* Borders */
  --border-light: var(--stone-800);
  --border-medium: var(--stone-700);
  --border-dark: var(--stone-400);

  /* Selection & Active States */
  --selected-background: var(--lime-950);
  --selected-color: var(--lime-100);
  --selected-border: var(--lime-800);

  /* Status */
  --urgent: var(--orange-400);
  --warning: var(--orange-700);
  --success: var(--lime-400);
  --error: var(--orange-400);
  --error-background: var(--orange-950);

  /* Financial */
  --credit: var(--green-400);

  /* Labels */
  --label-gray: var(--stone-800);
  --label-green: var(--lime-900);
  --label-orange: var(--orange-900);
  --label-purple: var(--lime-900);
  --label-red: var(--red-900);
  --label-yellow: var(--yellow-900);

  /* Icons */
  --icon-violet: var(--violet-400);
  --icon-yellow: var(--yellow-400);

  /* Row Highlights */
  --hl-gray: var(--stone-800);
  --hl-blue: var(--blue-950);
  --hl-green: var(--lime-950);
  --hl-orange: var(--orange-950);
  --hl-violet: var(--violet-950);
  --hl-red: var(--red-950);
  --hl-yellow: var(--yellow-950);

  /* Charts */
  --chart-income: var(--lime-500);
  --chart-expense: var(--red-500);
  --chart-border: var(--stone-500);
  --chart-fill: var(--stone-700);

  /* Focus */
  --focus-ring: var(--lime-400);

  /* Aliases */
  --success-hover: var(--lime-300);
  --lime-3: var(--lime-950);
  --lime-4: var(--lime-900);
  --lime-5: var(--lime-800);
  --lime-9: var(--lime-400);
  --lime-10: var(--lime-300);
  --red-3: var(--red-950);
  --red-4: var(--red-900);
  --red-5: var(--red-800);
  --red-10: var(--red-300);
  --yellow-3: var(--yellow-950);
}

/* ==========================================================================
   Utility Classes - Highlights
   ========================================================================== */

.hl-blue { background: var(--hl-blue) !important; }
.hl-gray { background: var(--hl-gray) !important; }
.hl-green { background: var(--hl-green) !important; }
.hl-orange { background: var(--hl-orange) !important; }
.hl-violet { background: var(--hl-violet) !important; }
.hl-purple { background: var(--hl-violet) !important; }
.hl-red { background: var(--hl-red) !important; }
.hl-yellow { background: var(--hl-yellow) !important; }

/* ==========================================================================
   Utility Classes - Text
   ========================================================================== */

.text-muted {
  color: var(--color-muted) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--error) !important;
}

/* ==========================================================================
   Utility Classes - Financial
   ========================================================================== */

.credit {
  color: var(--credit) !important;
}

.text-negative {
  color: var(--error) !important;
}