:root {
    /* Colors */
    --bg-color: #141414; /* Slate 900 */
    --text-primary: #f8fafc; /* Slate 50 */
    --text-secondary: #a3a3a3; /* Neutral 400 */
    --text-heading: #e5e5e5; /* Neutral 200 */
    
    --accent-orange: #fb923c; /* Orange 400 */
    --accent-orange-dark: #ea580c; /* Orange 600 */
    --gradient-primary-start: #fb923c;
    --gradient-primary-end: #ea580c;
    --gradient-brand-start: #fb923c;
    --gradient-brand-end: #bf9e27;

    --panel-bg: #1f1f1f; /* Neutral Dark Panel */
    --border-color: #333333; /* Neutral Dark Border */
    --placeholder-color: #737373; /* Neutral 500 */

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    /* Fluid Typography (Clamp) */
    --fs-heading: clamp(1.5rem, 5vw + 1rem, 3rem); /* Mobile 1.5rem (smaller) -> Desktop 3rem */
    --fs-body: clamp(0.875rem, 1vw + 0.75rem, 1.1rem); /* 0.875rem = 14px */
    --fs-nav: clamp(0.8rem, 1vw, 1rem);

    /* Fluid Spacing (Clamp) */
    --spacing-container: clamp(1rem, 5vw, 2.5rem); /* Padding: 1rem -> 2.5rem */
    --spacing-gap: clamp(1.5rem, 4vw, 3rem); /* Gap: 1.5rem -> 3rem */

    /* Radii */
    --radius-pill: 9999px;
    --radius-box: 20px;
    --radius-user-input: 12px;
    --radius-user-tabs: 7px;
    --radius-user-tab-item: 5px;
}