/* © 2025 iPrime | Foundation.css — Base styles, fonts, reset, and utilities */
/* 
   This file applies design tokens to base HTML elements and provides utilities.
   Requires: 
   - TokensFixed.css (fixed structural tokens)
   - TokensFluid.css (fluid/responsive tokens)
   - TokensOklchDark.css (color tokens)
   
   Purpose: Reset defaults and establish consistent typography/colors across the app.
   Note: Only base elements here. Component-specific styles go in their own files.
   
   Layer Order (lowest → highest priority):
   1. reset      — Box-sizing, margin/padding reset
   2. base       — HTML element defaults (body, headings, etc.)
   3. components — UI components (buttons, cards, modals)
   4. utilities  — Helper classes (.hidden, .text-center, etc.)
*/

/* =============================================================================
   LAYER ORDER DECLARATION — Define priority (first = lowest)
   ============================================================================= */

@layer reset, base, components, utilities;

/* =============================================================================
   FONT FACE DECLARATIONS — Self-hosted fonts (outside layers)
   ============================================================================= */

/* Plus Jakarta Sans — Primary body font */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/Static/Fonts/PlusJakartaSans/PlusJakartaSans-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Syne — Heading font */
@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/Syne/Syne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/Syne/Syne-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/Syne/Syne-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/Syne/Syne-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/Syne/Syne-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* JetBrains Mono — Code/monospace font */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* =============================================================================
   RESET LAYER — Lowest priority, can be overridden by everything
   ============================================================================= */

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

/* =============================================================================
   BASE LAYER — HTML element defaults
   ============================================================================= */

@layer base {
    html {
        font-size: 16px;
    }

    html, body {
        font-family: var(--token-font-primary);
        font-weight: var(--token-weight-400);
        line-height: var(--token-leading-150);
        letter-spacing: var(--token-tracking-normal);
        background: var(--token-bg-primary);
        color: var(--token-text-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--token-font-heading);
        font-weight: var(--token-weight-700);
        line-height: var(--token-leading-120);
        letter-spacing: var(--token-tracking-tight);
    }

    code, pre, kbd, samp {
        font-family: var(--token-font-mono);
        font-size: 0.9em;
    }

    strong, b {
        font-weight: var(--token-weight-700);
    }

    em, i {
        font-style: italic;
    }

    button {
        appearance: none;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    button:focus {
        outline: none;
    }

    /* Accessibility - Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* =============================================================================
   COMPONENTS LAYER — For UI components (add styles here or in separate files)
   ============================================================================= */

@layer components {
    /* Component styles go here or use: @layer components { } in component files */
}

/* =============================================================================
   UTILITIES LAYER — Highest priority, always wins
   ============================================================================= */

@layer utilities {
    /* =======================================================================
       VISIBILITY UTILITIES
       ======================================================================= */
    .hidden { display: none !important; }
    .sr-only { 
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    /* =======================================================================
       CONTAINER QUERY SETUP — Add to parent elements
       Usage: <div class="container-query">...</div>
       ======================================================================= */
    .container-query {
        container-type: inline-size;
    }
    
    .container-query-size {
        container-type: size;
    }
    
    /* =======================================================================
       AUTO-FIT GRIDS — Responsive grids without media queries
       Usage: <div class="grid-auto-fit-280">...</div>
       Number = minimum card width in px
       ======================================================================= */
    .grid-auto-fit-150 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-150), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-200 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-200), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-250 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-250), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-280 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-280), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-320 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-320), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-350 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-350), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-400 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-400), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    .grid-auto-fit-450 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-450), 1fr));
        gap: var(--token-space-fluid-16-24);
    }
    
    /* =======================================================================
       FLUID TEXT UTILITIES
       Usage: <h1 class="text-fluid-36-48">...</h1>
       Numbers = min-max font size in px (mobile → desktop)
       ======================================================================= */
    .text-fluid-12-14 { font-size: var(--token-text-fluid-12-14); }
    .text-fluid-14-16 { font-size: var(--token-text-fluid-14-16); }
    .text-fluid-16-18 { font-size: var(--token-text-fluid-16-18); }
    .text-fluid-18-20 { font-size: var(--token-text-fluid-18-20); }
    .text-fluid-20-24 { font-size: var(--token-text-fluid-20-24); }
    .text-fluid-24-32 { font-size: var(--token-text-fluid-24-32); }
    .text-fluid-30-40 { font-size: var(--token-text-fluid-30-40); }
    .text-fluid-36-48 { font-size: var(--token-text-fluid-36-48); }
    .text-fluid-40-64 { font-size: var(--token-text-fluid-40-64); }
    .text-fluid-48-80 { font-size: var(--token-text-fluid-48-80); }
    .text-fluid-56-96 { font-size: var(--token-text-fluid-56-96); }
    .text-fluid-64-128 { font-size: var(--token-text-fluid-64-128); }
    
    /* =======================================================================
       FLUID SPACING UTILITIES
       Usage: <div class="gap-fluid-16-24">...</div>
       Numbers = min-max spacing in px (mobile → desktop)
       ======================================================================= */
    .gap-fluid-4-8 { gap: var(--token-space-fluid-4-8); }
    .gap-fluid-8-12 { gap: var(--token-space-fluid-8-12); }
    .gap-fluid-12-16 { gap: var(--token-space-fluid-12-16); }
    .gap-fluid-16-24 { gap: var(--token-space-fluid-16-24); }
    .gap-fluid-20-32 { gap: var(--token-space-fluid-20-32); }
    .gap-fluid-24-40 { gap: var(--token-space-fluid-24-40); }
    .gap-fluid-28-48 { gap: var(--token-space-fluid-28-48); }
    .gap-fluid-32-64 { gap: var(--token-space-fluid-32-64); }
    .gap-fluid-40-80 { gap: var(--token-space-fluid-40-80); }
    .gap-fluid-48-96 { gap: var(--token-space-fluid-48-96); }
    .gap-fluid-64-128 { gap: var(--token-space-fluid-64-128); }
    
    /* =======================================================================
       FLUID PADDING UTILITIES (from TokensFluid.css)
       Usage: <div class="padding-fluid-16-24">...</div>
       ======================================================================= */
    .padding-fluid-4-8 { padding: var(--token-padding-fluid-4-8); }
    .padding-fluid-8-12 { padding: var(--token-padding-fluid-8-12); }
    .padding-fluid-8-16 { padding: var(--token-padding-fluid-8-16); }
    .padding-fluid-12-16 { padding: var(--token-padding-fluid-12-16); }
    .padding-fluid-12-20 { padding: var(--token-padding-fluid-12-20); }
    .padding-fluid-12-24 { padding: var(--token-padding-fluid-12-24); }
    .padding-fluid-16-24 { padding: var(--token-padding-fluid-16-24); }
    .padding-fluid-16-32 { padding: var(--token-padding-fluid-16-32); }
    .padding-fluid-20-32 { padding: var(--token-padding-fluid-20-32); }
    .padding-fluid-24-40 { padding: var(--token-padding-fluid-24-40); }
    .padding-fluid-24-48 { padding: var(--token-padding-fluid-24-48); }
    .padding-fluid-32-48 { padding: var(--token-padding-fluid-32-48); }
    .padding-fluid-32-64 { padding: var(--token-padding-fluid-32-64); }
    .padding-fluid-40-64 { padding: var(--token-padding-fluid-40-64); }
    .padding-fluid-48-96 { padding: var(--token-padding-fluid-48-96); }
    .padding-fluid-64-128 { padding: var(--token-padding-fluid-64-128); }
    
    /* =======================================================================
       FLUID MARGIN UTILITIES
       Usage: <div class="margin-fluid-16-24">...</div>
       ======================================================================= */
    .margin-fluid-4-8 { margin: var(--token-margin-fluid-4-8); }
    .margin-fluid-8-12 { margin: var(--token-margin-fluid-8-12); }
    .margin-fluid-8-16 { margin: var(--token-margin-fluid-8-16); }
    .margin-fluid-12-16 { margin: var(--token-margin-fluid-12-16); }
    .margin-fluid-12-24 { margin: var(--token-margin-fluid-12-24); }
    .margin-fluid-16-24 { margin: var(--token-margin-fluid-16-24); }
    .margin-fluid-16-32 { margin: var(--token-margin-fluid-16-32); }
    .margin-fluid-20-32 { margin: var(--token-margin-fluid-20-32); }
    .margin-fluid-24-40 { margin: var(--token-margin-fluid-24-40); }
    .margin-fluid-24-48 { margin: var(--token-margin-fluid-24-48); }
    .margin-fluid-32-48 { margin: var(--token-margin-fluid-32-48); }
    .margin-fluid-32-64 { margin: var(--token-margin-fluid-32-64); }
    .margin-fluid-48-96 { margin: var(--token-margin-fluid-48-96); }
    .margin-fluid-64-128 { margin: var(--token-margin-fluid-64-128); }
    
    /* Block margin (top/bottom only) */
    .mb-fluid-8-16 { margin-block: var(--token-margin-fluid-8-16); }
    .mb-fluid-16-24 { margin-block: var(--token-margin-fluid-16-24); }
    .mb-fluid-24-40 { margin-block: var(--token-margin-fluid-24-40); }
    .mb-fluid-32-64 { margin-block: var(--token-margin-fluid-32-64); }
    .mb-fluid-48-96 { margin-block: var(--token-margin-fluid-48-96); }
    
    /* =======================================================================
       FLUID BORDER RADIUS UTILITIES
       Usage: <div class="radius-fluid-12-20">...</div>
       ======================================================================= */
    .radius-fluid-4-8 { border-radius: var(--token-radius-fluid-4-8); }
    .radius-fluid-6-12 { border-radius: var(--token-radius-fluid-6-12); }
    .radius-fluid-8-12 { border-radius: var(--token-radius-fluid-8-12); }
    .radius-fluid-8-16 { border-radius: var(--token-radius-fluid-8-16); }
    .radius-fluid-12-16 { border-radius: var(--token-radius-fluid-12-16); }
    .radius-fluid-12-20 { border-radius: var(--token-radius-fluid-12-20); }
    .radius-fluid-12-24 { border-radius: var(--token-radius-fluid-12-24); }
    .radius-fluid-16-24 { border-radius: var(--token-radius-fluid-16-24); }
    .radius-fluid-16-32 { border-radius: var(--token-radius-fluid-16-32); }
    .radius-fluid-20-32 { border-radius: var(--token-radius-fluid-20-32); }
    .radius-fluid-24-40 { border-radius: var(--token-radius-fluid-24-40); }
    .radius-fluid-32-48 { border-radius: var(--token-radius-fluid-32-48); }
    
    /* =======================================================================
       FLUID HEIGHT UTILITIES
       Usage: <button class="height-fluid-40-48">...</button>
       ======================================================================= */
    .height-fluid-32-40 { height: var(--token-height-fluid-32-40); }
    .height-fluid-36-44 { height: var(--token-height-fluid-36-44); }
    .height-fluid-36-48 { height: var(--token-height-fluid-36-48); }
    .height-fluid-40-48 { height: var(--token-height-fluid-40-48); }
    .height-fluid-40-56 { height: var(--token-height-fluid-40-56); }
    .height-fluid-44-56 { height: var(--token-height-fluid-44-56); }
    .height-fluid-48-64 { height: var(--token-height-fluid-48-64); }
    .height-fluid-56-72 { height: var(--token-height-fluid-56-72); }
    .height-fluid-64-80 { height: var(--token-height-fluid-64-80); }
    .height-fluid-80-112 { height: var(--token-height-fluid-80-112); }
    .height-fluid-96-128 { height: var(--token-height-fluid-96-128); }
    
    /* =======================================================================
       FLUID ICON SIZE UTILITIES
       Usage: <svg class="icon-fluid-20-24">...</svg>
       ======================================================================= */
    .icon-fluid-16-20 { width: var(--token-icon-fluid-16-20); height: var(--token-icon-fluid-16-20); }
    .icon-fluid-16-24 { width: var(--token-icon-fluid-16-24); height: var(--token-icon-fluid-16-24); }
    .icon-fluid-20-24 { width: var(--token-icon-fluid-20-24); height: var(--token-icon-fluid-20-24); }
    .icon-fluid-24-32 { width: var(--token-icon-fluid-24-32); height: var(--token-icon-fluid-24-32); }
    .icon-fluid-32-40 { width: var(--token-icon-fluid-32-40); height: var(--token-icon-fluid-32-40); }
    .icon-fluid-32-48 { width: var(--token-icon-fluid-32-48); height: var(--token-icon-fluid-32-48); }
    .icon-fluid-40-56 { width: var(--token-icon-fluid-40-56); height: var(--token-icon-fluid-40-56); }
    .icon-fluid-48-64 { width: var(--token-icon-fluid-48-64); height: var(--token-icon-fluid-48-64); }
    .icon-fluid-64-96 { width: var(--token-icon-fluid-64-96); height: var(--token-icon-fluid-64-96); }
    
    /* =======================================================================
       FLUID AVATAR SIZE UTILITIES
       Usage: <img class="avatar-fluid-40-56">...</img>
       ======================================================================= */
    .avatar-fluid-24-32 { width: var(--token-avatar-fluid-24-32); height: var(--token-avatar-fluid-24-32); }
    .avatar-fluid-32-40 { width: var(--token-avatar-fluid-32-40); height: var(--token-avatar-fluid-32-40); }
    .avatar-fluid-40-48 { width: var(--token-avatar-fluid-40-48); height: var(--token-avatar-fluid-40-48); }
    .avatar-fluid-40-56 { width: var(--token-avatar-fluid-40-56); height: var(--token-avatar-fluid-40-56); }
    .avatar-fluid-48-64 { width: var(--token-avatar-fluid-48-64); height: var(--token-avatar-fluid-48-64); }
    .avatar-fluid-64-80 { width: var(--token-avatar-fluid-64-80); height: var(--token-avatar-fluid-64-80); }
    .avatar-fluid-64-96 { width: var(--token-avatar-fluid-64-96); height: var(--token-avatar-fluid-64-96); }
    .avatar-fluid-80-112 { width: var(--token-avatar-fluid-80-112); height: var(--token-avatar-fluid-80-112); }
    .avatar-fluid-96-128 { width: var(--token-avatar-fluid-96-128); height: var(--token-avatar-fluid-96-128); }
    
    /* =======================================================================
       FLUID MAX-WIDTH UTILITIES
       Usage: <div class="max-w-fluid-720-960">...</div>
       ======================================================================= */
    .max-w-fluid-320-400 { max-width: var(--token-max-width-fluid-320-400); }
    .max-w-fluid-480-640 { max-width: var(--token-max-width-fluid-480-640); }
    .max-w-fluid-600-800 { max-width: var(--token-max-width-fluid-600-800); }
    .max-w-fluid-720-960 { max-width: var(--token-max-width-fluid-720-960); }
    .max-w-fluid-800-1024 { max-width: var(--token-max-width-fluid-800-1024); }
    .max-w-fluid-960-1200 { max-width: var(--token-max-width-fluid-960-1200); }
    .max-w-fluid-1024-1280 { max-width: var(--token-max-width-fluid-1024-1280); }
    .max-w-fluid-1200-1440 { max-width: var(--token-max-width-fluid-1200-1440); }
    .max-w-fluid-1440-1920 { max-width: var(--token-max-width-fluid-1440-1920); }
}

/* =============================================================================
   END OF BASE STYLES
   ============================================================================= */