:root {
  /* HSL Palette - Warm warm lavender cream theme */
  --h-primary: 224;
  --s-primary: 100%;
  --l-primary: 65%; /* #4F7CFF */

  --h-secondary: 258;
  --s-secondary: 90%;
  --l-secondary: 76%; /* #A78BFA */

  --h-accent: 48;
  --s-accent: 96%;
  --l-accent: 53%; /* #FACC15 */

  --color-primary: hsl(var(--h-primary), var(--s-primary), var(--l-primary));
  --color-primary-hover: hsl(var(--h-primary), var(--s-primary), calc(var(--l-primary) - 8%));
  --color-primary-soft: hsl(var(--h-primary), var(--s-primary), 95%);
  --color-secondary: hsl(var(--h-secondary), var(--s-secondary), var(--l-secondary));
  --color-secondary-soft: hsl(var(--h-secondary), var(--s-secondary), 96%);
  --color-accent: hsl(var(--h-accent), var(--s-accent), var(--l-accent));

  /* Colors defaults (Light Mode) */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F1F5F9;
  --color-surface-card: #FFFFFF;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-text-light: #94A3B8;
  --color-border: #E2E8F0;
  
  --color-danger: #DC2626;
  --color-danger-soft: #FEE2E2;
  --color-success: #16A34A;
  --color-success-soft: #DCFCE7;
  --color-warning: #D97706;
  --color-warning-soft: #FEF3C7;
  --color-info: #0284C7;
  --color-info-soft: #E0F2FE;

  /* Typography & Layout Tokens */
  --font-base: "Outfit", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-reader: "Georgia", "Times New Roman", serif;
  --font-dyslexia: "Arial", "Verdana", sans-serif;

  /* Rounded Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 16px 40px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  
  /* Transition timings */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Touch Target */
  --touch-target: 44px;
  
  /* Safe-Area Defaults */
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
}