/* variables.css */
:root {
  /* Colors - Sleek Premium Light Mode (HSL based for easy opacity manipulation) */
  --hue-primary: 220;  /* Standard GNAL Slate/Blue base */
  --hue-success: 142;  /* Emerald base */
  --hue-danger: 0;     /* Ruby base */
  --hue-warning: 38;   /* Amber base */

  --color-primary: hsl(var(--hue-primary), 84%, 45%);
  --color-primary-hover: hsl(var(--hue-primary), 84%, 38%);
  --color-primary-glow: hsla(var(--hue-primary), 84%, 45%, 0.1);

  --color-success: hsl(var(--hue-success), 72%, 40%);
  --color-success-glow: hsla(var(--hue-success), 72%, 40%, 0.1);

  --color-danger: hsl(var(--hue-danger), 84%, 55%);
  --color-danger-hover: hsl(var(--hue-danger), 84%, 45%);
  --color-danger-glow: hsla(var(--hue-danger), 84%, 55%, 0.1);

  --color-warning: hsl(var(--hue-warning), 93%, 45%);

  /* Neutral Background Canvas (Light Mode) */
  --color-bg-darkest: #f1f5f9;  /* Off-white page canvas */
  --color-bg-dark: #f8fafc;     /* Lighter background */
  --color-bg-panel: #ffffff;    /* Pure white panels */
  --color-bg-panel-hover: #f1f5f9;
  
  /* Text colors - High Contrast Dark Slate */
  --color-text-light: #0f172a;  /* Heading text */
  --color-text-normal: #334155; /* Body text */
  --color-text-muted: #64748b;  /* Secondary details */
  --color-text-disabled: #94a3b8;

  /* Borders & Inputs */
  --color-border: #cbd5e1;
  --color-border-focus: hsl(var(--hue-primary), 84%, 45%);
  --color-border-error: hsl(var(--hue-danger), 84%, 55%);
  --color-input-bg: #ffffff;

  /* Typography */
  --font-family: 'Manrope', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.75rem;
  
  /* Spacers & Padding */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Layout Boundaries */
  --container-max-width: 1280px;
  --sidebar-width: 260px;
  --header-height: 70px;

  /* Structural Details */
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-round: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-panel: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-focus: 0 0 0 4px var(--color-primary-glow);
  --shadow-error-focus: 0 0 0 4px var(--color-danger-glow);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}