/* DESIGN TOKENS (CSS Variables) */
:root {
    /* Colors - Light Mode */
    --primary-color: #0a192f;
    --accent-color: #ff4d00;
    --accent-hover: #e04400;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-main: #1a202c;
    --text-muted: #4a5568;
    --border-color: #e2e8f0;
    --header-bg: rgba(255, 255, 255, 0.88);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.1);

    /* Typography */
    --font-main: 'Cairo', sans-serif;
    --font-heading: 'Outfit', 'Cairo', sans-serif;

    /* Spacing & Radii */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Dynamic Container Width (Task 84) */
    --container-width: 1200px;

    /* Layout Density (Task 77) */
    --grid-gap: 30px;
    --card-padding: 25px;
    --section-margin: 60px;
    --base-font-size: 16px;

    /* Common Aspect Ratios (Task 80) */
    --aspect-ratio: 16 / 9;
    --aspect-video: 16 / 9;
    --aspect-portrait: 3 / 4;
    --aspect-square: 1 / 1;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Density Variants */
body.density-compact {
    --grid-gap: 15px;
    --card-padding: 15px;
    --section-margin: 30px;
    --base-font-size: 15px;
}
body.density-comfortable {
    --grid-gap: 40px;
    --card-padding: 30px;
    --section-margin: 80px;
}
body.density-focus {
    --grid-gap: 50px;
    --card-padding: 40px;
    --section-margin: 100px;
}

/* Responsive Widths */
@media (min-width: 1440px) { :root { --container-width: 1300px; } }
@media (min-width: 1600px) { :root { --container-width: 1400px; } }
@media (min-width: 1920px) { :root { --container-width: 1500px; } }

/* Dark Mode Tokens */
[data-theme="dark"] {
    --primary-color: #1a365d;
    --accent-color: #ff5e1a;
    --accent-hover: #ff7840;
    --bg-color: #050b14;
    --card-bg: #0d1520;
    --text-main: #e2e8f0;
    --text-muted: #a0aec0;
    --border-color: #1e2d3d;
    --header-bg: rgba(5, 11, 20, 0.88);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.4);
}