:root {
    --primary-color-hsl: 12 78% 54%; /* #E54D2E Red-Orange from Logo */
    --text-heading-hsl: 0 0% 96%;   /* #F5F5F5 Off-White */
    --text-color-hsl: 210 17% 82%;  /* #DCDCDC Light Gray */
    --text-muted-hsl: 210 15% 55%;  /* #888888 Gray */
    --background-color-hsl: 240 5% 7%; /* #121212 Near Black */
    --surface-color-hsl: 240 5% 12%;  /* #1E1E1E Dark Gray */
    --border-color-hsl: 240 4% 20%;   /* #333333 */

    --primary-color: hsl(var(--primary-color-hsl));
    --primary-color-hover: hsl(12 78% 60%);
    --text-heading: hsl(var(--text-heading-hsl));
    --text-color: hsl(var(--text-color-hsl));
    --text-muted: hsl(var(--text-muted-hsl));
    --background-color: hsl(var(--background-color-hsl));
    --surface-color: hsl(var(--surface-color-hsl));
    --border-color: hsl(var(--border-color-hsl));
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}