/* ===== CSS Variables ===== */
:root {
  --primary: rgb(255, 102, 0);
  --primary-light: rgb(255, 133, 51);
  --primary-dark: hsl(24, 100%, 40%);
  --primary-glow: hsl(24, 100%, 70%);

  --white: #ffffff;
  --off-white: hsl(30, 30%, 98%);
  --light-gray: hsl(30, 10%, 95%);
  --gray: hsl(0, 0%, 60%);
  --dark-gray: hsl(0, 0%, 40%);
  --text: rgb(51, 51, 51);
  --text-light: hsl(0, 0%, 45%);        /* fixed: was hsl(zz0, ...) */

  --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.08);
  --shadow-md: 0 4px 20px hsla(0, 0%, 0%, 0.1);
  --shadow-lg: 0 10px 40px hsla(0, 0%, 0%, 0.15);
  --shadow-glow: 0 0 30px hsla(24, 100%, 50%, 0.3);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition: all 0.3s ease;
}


/* ===== Dark Mode Variables ===== */
body.dark-mode {
  --primary: rgb(180, 74, 10);
  --primary-light: rgb(214, 98, 15);
  --primary-dark: rgb(230, 92, 0);
  --primary-glow: hsla(24, 100%, 60%, 0.4);

  --white: #121301;
  --off-white: rgb(20, 9, 8);
  --light-gray: hsl(0, 0%, 22%);
  --gray: hsl(0, 0%, 60%);
  --dark-gray: hsl(0, 0%, 75%);

  --text: hsl(0, 4%, 82%);
  --text-light: hsl(0, 0%, 70%);

  --shadow-sm: 0 2px 10px hsla(0, 0%, 0%, 0.6);
  --shadow-md: 0 4px 25px hsla(0, 0%, 0%, 0.7);
  --shadow-lg: 0 10px 45px hsla(0, 0%, 0%, 0.8);
}