:root {
    /* Deep Zinc Premium Palette */
    --color-bg:            #09090b;
    --color-bg-primary:    #09090b;
    --color-bg-secondary:  #18181b;
    --color-bg-tertiary:   #27272a;
    --color-surface:       #18181b;

    --color-primary:       #ef4444;
    /* Modern Vibrant Red (Tailwind Red-500) */
    --color-primary-dark:  #b91c1c;

    --color-text-primary:  #fafafa;
    --color-text-secondary:#a1a1aa;
    --color-text-muted:    #52525b;

    --color-border:        #27272a;

    /* Spacing & Layout */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --container-width: 1400px;

    /* Header height tokens */
    --header-height: 105px;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* Effects */
    --glass-bg:   rgba(24, 24, 27, 0.7);
    --glass-blur: blur(12px);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Z-Index Layers */
    --z-background: -1;
    --z-content: 10;
    --z-header: 100;
    --z-modal: 1000;
}

html {
    /* WebKit can still let the viewport itself scroll horizontally a few px
       (from position:fixed header content) even with overflow-x:hidden only
       on body — confirmed on iPhone SE width via a real swipe-scroll test.
       Belt-and-suspenders: hide it at both levels. */
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
    max-width: 100vw;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}