/* ==========================================================================
   CSS Variables & Design Tokens (個人專長與衛教網站專用)
   ========================================================================== */

:root {
  /* Fonts */
  --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, "Noto Serif TC", serif;

  /* Universal Brand Colors (Health & Trust) */
  --color-primary-hue: 174; /* Soft Teal/Cyan representing life, healing & health */
  --color-primary: hsl(var(--color-primary-hue), 75%, 38%);
  --color-primary-light: hsl(var(--color-primary-hue), 75%, 95%);
  --color-primary-hover: hsl(var(--color-primary-hue), 75%, 30%);
  --color-primary-alpha: rgba(24, 169, 154, 0.1);

  --color-secondary-hue: 215; /* Trustworthy Deep Blue/Slate for authority & trust */
  --color-secondary: hsl(var(--color-secondary-hue), 60%, 16%);
  --color-secondary-hover: hsl(var(--color-secondary-hue), 60%, 10%);
  
  --color-accent-hue: 12; /* Energizing Warm Coral for highlights & interactive cues */
  --color-accent: hsl(var(--color-accent-hue), 88%, 59%);
  --color-accent-hover: hsl(var(--color-accent-hue), 88%, 49%);
  --color-accent-light: hsl(var(--color-accent-hue), 88%, 95%);

  --color-success: hsl(142, 70%, 45%);
  --color-warning: hsl(45, 90%, 50%);
  --color-danger: hsl(350, 80%, 55%);

  /* Transitions & Animation Speed */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 4rem;

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* Light Theme Variables (Default) - Style B: Oats Warm Grey */
  --bg-primary: hsl(30, 8%, 91%);       /* Soft oats grey base background */
  --bg-secondary: hsl(30, 6%, 95%);     /* Light oats grey section background */
  --bg-tertiary: hsl(30, 6%, 86%);      /* Oats grey for active/hover */
  --bg-card: hsl(0, 0%, 100%);            /* Pure white for cards to pop out */
  
  --text-primary: hsl(215, 60%, 16%);
  --text-secondary: hsl(215, 20%, 42%);
  --text-light: hsl(215, 12%, 60%);
  --text-inverse: hsl(0, 0%, 100%);

  --border-color: rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 20px -5px rgba(15, 23, 42, 0.06), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.1);
  
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: 20px;
}

/* Dark Theme Variables (Activated via dataset on documentElement) */
[data-theme="dark"] {
  --bg-primary: hsl(220, 24%, 6%);
  --bg-secondary: rgba(13, 20, 36, 0.45);     /* Translucent dark space blue */
  --bg-tertiary: rgba(22, 32, 57, 0.6);       /* Slightly lighter translucent blue */
  --bg-card: rgba(22, 32, 57, 0.7);           /* Translucent card background */

  --text-primary: hsl(210, 30%, 96%);
  --text-secondary: hsl(215, 15%, 75%);
  --text-light: hsl(215, 12%, 56%);
  --text-inverse: hsl(220, 24%, 6%);

  --border-color: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 30px 60px -15px rgba(0, 0, 0, 0.6);

  --glass-bg: rgba(18, 28, 50, 0.7);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 20px;

  --color-primary-light: hsl(var(--color-primary-hue), 40%, 15%);
  --color-primary-alpha: rgba(24, 169, 154, 0.12);
  --color-accent-light: hsl(var(--color-accent-hue), 40%, 15%);
}