/* © 2026 iPrime | CssThemeFoundation.css */

/* =============================================================================
   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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsPlusJakartaSans/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/FontsSyne/Syne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Syne';
    src: url('/Static/Fonts/FontsSyne/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/FontsJetBrainsMono/JetBrainsMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/Static/Fonts/FontsJetBrainsMono/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;
        /* Cosmic background — uses token synced with UiShell.ejs critical CSS */
        background: var(--prime-html-background);
    }

    html, body {
        font-family: var(--prime-font-primary);
        font-weight: var(--prime-font-weight-400);
        line-height: var(--prime-line-height-150);
        letter-spacing: var(--prime-letter-spacing-0);
        color: var(--prime-body-text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

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

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

    strong, b {
        font-weight: var(--prime-font-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(--prime-grid-min-150), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-200 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-200), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-250 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-250), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-280 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-280), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-320 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-320), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-350 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-350), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-400 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-400), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
    .grid-auto-fit-450 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--prime-grid-min-450), 1fr));
        gap: var(--prime-space-fluid-16-24);
    }
    
}

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