:root {
    /* Colors - Core */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-body: #555555;
    /* Improved readability */
    --color-heading: #111111;
    --color-accent: #000080;
    --color-accent-hover: #000080;

    /* Semantic Colors */
    --color-success: #28a745;
    --color-error: #000080;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    /* Backgrounds & Borders */
    --color-bg-light: #f8f9fa;
    --color-border: #e1e1e1;
    --color-border-light: #f0f0f0;



    /* Typography */
    --rubik-arial: 'Rubik', Arial, sans-serif;
    /* --font-primary: 'Open Sans', sans-serif; */
    /* Body Text */
    --rubik: 'Rubik', sans-serif;

    /* --font-heading: 'Poppins', sans-serif; */
    /* Headings, Nav, Buttons */

    /* Typography Scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 32px;
    --font-size-hero: clamp(40px, 8vw, 80px);

    --line-height-base: 1.6;
    --letter-spacing-base: 0.02em;

    /* Spacing Scale */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 100px;

    /* Design Details */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);

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

    /* Layout */
    --container-fluid-padding: clamp(20px, 5vw, 100px);
    --header-height: 85px;
    --topbar-height: 0px;
}