/**
 * Beauty Design Tokens
 *
 * CSS custom properties for colors, spacing, etc.
 * Uses light-dark() for automatic theme support.
 */

:root {
  color-scheme: light dark;

  /* ===================================================================
   * COLORS - Single temperature palette (warm neutrals throughout)
   *
   * IMPORTANT: Mixing warm and cool temperatures creates visual vibration.
   * This palette uses warm neutrals exclusively, varying saturation,
   * brightness, and hue within the warm range only.
   * =================================================================== */

  /* Base colors - content area */
  --color-text: light-dark(hsl(30 7% 16%), hsl(30 10% 90%));  /* Warm dark brown / warm light */
  --color-background: light-dark(hsl(40 23% 90%), hsl(30 7% 11%));  /* Warm beige - darker for contrast with white inputs */
  --color-editable-background: light-dark(hsl(0 0% 100%), hsl(30 7% 16%));  /* White inputs/selects create "holes to fill" effect */
  --color-background-header: light-dark(hsl(40 17% 80%), hsl(30 6% 16%));  /* Darker for table headers/footers, light enough for dark text */
  --color-background-footer: light-dark(hsl(40 17% 80%), hsl(30 6% 16%));  /* Match header for consistency */
  --color-greenbar-alternate: light-dark(hsl(40 29% 95%), hsl(30 7% 14%));  /* Greenbar paper bands - subtle alternating background */
  --color-background-paper: light-dark(hsl(0 0% 100%), hsl(30 7% 16%));  /* Paper white for reports and printable content */

  /* Button color system - Primary (safe actions: save, submit) */
  --color-primary: light-dark(hsl(80 20% 46%), hsl(80 20% 52%));  /* Muted olive base color */
  --color-primary-light: light-dark(hsl(80 30% 85%), hsl(80 10% 19%));  /* Light olive - button backgrounds */
  --color-primary-dark: light-dark(hsl(80 23% 38%), hsl(80 23% 57%));  /* Darker olive - button text */

  /* Button color system - Secondary (utility actions: print, cancel) */
  --color-secondary-light: light-dark(hsl(210 15% 85%), hsl(210 12% 22%));  /* Very muted blue-gray - subtle hue distinction without standing out */
  --color-secondary-dark: light-dark(hsl(210 20% 30%), hsl(210 20% 70%));  /* Darker blue-gray - button text */

  /* Button color system - Danger (destructive actions: delete) */
  --color-danger: light-dark(hsl(10 35% 54%), hsl(10 35% 58%));  /* Muted terracotta base color */
  --color-danger-light: light-dark(hsl(10 35% 87%), hsl(10 15% 21%));  /* Light terracotta - button backgrounds */
  --color-danger-dark: light-dark(hsl(10 38% 40%), hsl(10 38% 66%));  /* Darker terracotta - button text */

  /* Financial negative values - more saturated red for monetary emphasis */
  --color-negative: light-dark(hsl(0 60% 45%), hsl(0 60% 60%));  /* Saturated red - closer to pure red but not harsh */

  /* Financial favorable/unfavorable - for budget comparison coloring */
  --color-favorable: light-dark(hsl(140 40% 35%), hsl(140 40% 55%));  /* Muted green - favorable variance */
  --color-unfavorable: light-dark(hsl(0 60% 45%), hsl(0 60% 60%));  /* Matches --color-negative */

  /* Highlight color - high saturation yellow for attention-grabbing flash effects */
  --color-highlight: light-dark(hsl(50 90% 70%), hsl(50 70% 35%));  /* Bright yellow - visible against any background */

  /* Links - warm blue-gray that harmonizes with olive/terracotta palette */
  --color-link: light-dark(hsl(200 25% 38%), hsl(200 25% 58%));  /* Muted blue-gray - warm undertones */

  /* Borders - warm gray that harmonizes with beige backgrounds */
  --color-border: light-dark(hsl(30 10% 75%), hsl(30 5% 28%));  /* Warm gray border */

  /* Text secondary - de-emphasized text (labels, hints, timestamps) */
  --color-text-secondary: light-dark(hsl(30 5% 45%), hsl(30 5% 60%));  /* Warm mid-gray */

  /* Background subtle - slight tint for visual grouping without strong contrast */
  --color-background-subtle: light-dark(hsl(40 20% 95%), hsl(30 5% 15%));  /* Barely-there warm tint */

  /* Success - confirmations, positive status */
  --color-success: light-dark(hsl(140 40% 35%), hsl(140 40% 55%));  /* Matches --color-favorable */

  /* Warning/alert colors - amber for attention, warnings, needs-action states */
  --color-warning-background: light-dark(hsl(45 100% 90%), hsl(45 40% 20%));  /* Warm yellow/amber background */
  --color-warning-text: light-dark(hsl(45 50% 25%), hsl(45 60% 80%));  /* Darker text for contrast */
  --color-warning-border: light-dark(hsl(45 70% 70%), hsl(45 40% 35%));  /* Amber border */

  /* Badge colors - small status indicators */
  --color-badge-success-background: light-dark(hsl(140 30% 88%), hsl(140 20% 18%));  /* Soft green */
  --color-badge-success-text: light-dark(hsl(140 50% 20%), hsl(140 40% 70%));  /* Dark green text */
  --color-badge-danger-background: light-dark(hsl(0 50% 93%), hsl(0 20% 18%));  /* Soft red */
  --color-badge-danger-text: light-dark(hsl(0 50% 30%), hsl(0 40% 70%));  /* Dark red text */

  /* Editing state - adding machine and inline editing highlights */
  --color-editing-background: light-dark(hsl(55 100% 88%), hsl(55 40% 20%));  /* Warm yellow highlight */
  --color-editing-border: light-dark(hsl(30 100% 50%), hsl(30 70% 45%));  /* Orange border for active edit */
  --color-editing-negative: light-dark(hsl(0 70% 50%), hsl(0 60% 60%));  /* Red for negative tape entries */

  /* Focus ring - source field outline when adding machine is active */
  --color-focus-ring: light-dark(hsl(210 70% 55%), hsl(210 60% 55%));  /* Blue outline */

  /* Contrast text - white/light text on filled backgrounds (primary buttons, active tabs) */
  --color-on-filled: light-dark(hsl(0 0% 100%), hsl(0 0% 100%));  /* White in both modes */

  /* Budget group header - slightly darker than standard header for visual nesting */
  --color-background-group-header: light-dark(hsl(0 0% 88%), hsl(30 7% 22%));

  /* Interactive states - subtle tints for hover, grouping */
  --color-hover-tint: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.03));  /* Barely visible hover */
  --color-group-tint: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));  /* Budget group rows */

  /* Drag handles */
  --color-drag-handle: light-dark(hsl(30 5% 60%), hsl(30 5% 45%));  /* Muted, unobtrusive */
  --color-drag-handle-hover: light-dark(hsl(30 5% 25%), hsl(30 5% 75%));  /* More visible on hover */

  /* Overlays and shadows */
  --color-overlay: rgba(0, 0, 0, 0.5);  /* Modal/dialog/loading backdrops */
  --color-shadow: rgba(0, 0, 0, 0.1);  /* Standard box-shadow color */
  --color-shadow-strong: rgba(0, 0, 0, 0.15);  /* Heavier box-shadow (dropdowns, popups) */

  /* Print colors - used in print.css standalone print windows */
  --print-text-secondary: hsl(0 0% 40%);  /* Subtitles, de-emphasized text */
  --print-border: hsl(0 0% 87%);  /* Table borders */
  --print-header-background: hsl(0 0% 96%);  /* Table header background */
  --print-negative: hsl(0 80% 40%);  /* Negative amounts */
  --print-total-border: hsl(0 0% 20%);  /* Bold total row border */
  --print-muted: hsl(0 0% 60%);  /* Placeholder/italic text */

  /* Spacing */
  --space-sm: 0.5rem;   /* 8px - Used for horizontal padding in table cells */
  --space-md: 1rem;     /* 16px - Used for horizontal padding in table cells */
  --space-lg: 1.5rem;   /* 24px - Used for margin-block-end on major elements (h2, h3, form, table) */
  --space-xl: 3rem;     /* 48px - Used for major page sections (dashboard cards) */

  /* Input natural spacing - minimal vertical padding to make editable areas
   * feel proportional to surrounding text without borders/padding */
  --input-vertical-natural: 0.1875rem;  /* 3px - Applied to top and bottom of inputs */

  /* Table row natural spacing - minimal vertical padding to harmonize tables with forms.
   * Gives rows breathing room to match the visual weight of form fields. */
  --table-row-vertical-natural: 0.15625rem;  /* 2.5px - Applied to top and bottom of table cells */
}