/* ==========================================================================
   LAYER HIERARCHY (2026: Explicit Declarations First)
   ========================================================================== */
@layer reset, base, objects, components, utilities, themes, htmx;

/* ==========================================================================
   RESET LAYER: Complete Minimal Reset (2026 Standards)
   ========================================================================== */
@layer reset {

    /* Universal box model */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Document defaults */
    html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 16px;
        scroll-behavior: smooth;
        scroll-padding-block-start: 6rem;
        overscroll-behavior: none;
        accent-color: var(--color-primary, blue);
        field-sizing: content;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            transition-duration: 0.01ms;
            animation-duration: 0.01ms;
            animation-iteration-count: 1;
        }
    }

    body {
        margin: 0;
        padding-block: 0;
        min-height: 100vh;
        text-size-adjust: 100%;
        font: 100% / 1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overscroll-behavior: none;
    }

    /* Typography elements */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    dl,
    address,
    small,
    b,
    strong,
    i,
    em,
    cite,
    q,
    code,
    pre,
    kbd,
    samp,
    dfn,
    mark,
    ins,
    del,
    hr,
    br {
        margin: 0;
        padding: 0;
    }

    pre,
    code,
    kbd,
    samp {
        font-family: Consolas, Monaco, "Andale Mono", "Liberation Mono", "Courier New", monospace;
    }

    /* Lists */
    ul,
    ol,
    dl,
    menu,
    dir,
    fieldset,
    form {
        list-style: none;
        padding-block: 0;
        margin-block: 0;
        padding-inline: 0;
    }

    li,
    dt,
    dd {
        margin-block: 0;
    }

    /* Blockquote */
    blockquote,
    q,
    dd {
        quotes: none;
    }

    /* Tables */
    table,
    th,
    td {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* Media */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-inline-size: 100%;
        height: auto;
    }

    /* Forms & Inputs */
    fieldset,
    legend,
    form,
    label,
    button,
    input,
    textarea,
    select,
    optgroup {
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        font: inherit;
        box-sizing: inherit;
    }

    /* https://github.com/css‑wg/csswg‑drafts/issues/5260#issuecomment‑1306283486 */
    fieldset {
        min-width: 0;
    }

    button,
    [type="button"],
    [type="submit"],
    [type="reset"],
    [type="image"] {
        appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    input,
    textarea,
    select {
        border: 1px solid var(--border-color, currentColor);
        border-radius: var(--radius-sm, 0.25rem);
        background-color: var(--color-bg, transparent);
        color: var(--color-fg-1, inherit);
        padding: var(--space-3, 0.75rem);
        transition: border-block-color 0.2s ease, box-shadow 0.2s ease;
    }

    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: none;
        border-block-color: var(--border-focus, currentColor);
        box-shadow: var(--focus-ring, none), 0 0 0 3px var(--border-focus);
    }

    input::placeholder {
        color: var(--color-fg-3, inherit);
        opacity: 1;
    }

    /* Default list indentation (utility override available) */
    ul,
    ol {
        padding-inline-start: var(--space-6, 1.5rem);
        margin-block-end: var(--space-4, 1rem);
    }

    li {
        margin-block: var(--space-1, 0.25rem);
    }

    /* Print */
    @media print {

        html,
        body,
        hr,
        th,
        td {
            background: none;
            color: #000;
            border-color: #000;
        }

        * {
            box-shadow: none;
            text-shadow: none;
        }
    }
}

/* ==========================================================================
   BASE LAYER: Design Tokens + Typography (Complete 2026 Implementation)
   ========================================================================== */
@layer base {
    :root {
        color-scheme: light dark;

        /* ========================================
       COLORS: Minimal 4-Palette (iamsajid + OKLCH)
       Primary (bg/text), Secondary (surface), Accent, Semantic
       ======================================= */
        /* Core 4-Color System (Light Mode) */
        --color-primary: oklch(97% 0.02 240);
        /* Bg / primary text */
        --color-secondary: oklch(12% 0.03 240);
        /* Surface / fg */
        --color-accent: oklch(65% 0.28 260);
        /* Primary/action */
        --color-accent-fg: oklch(99% 0 0);
        /* Accent text (white) */

        /* Semantic (iamsajid-inspired: success/warning/danger/info) */
        --color-success: oklch(68% 0.22 145);
        /* Green */
        --color-success-fg: oklch(99% 0 0);
        --color-warning: oklch(75% 0.20 85);
        /* Amber */
        --color-warning-fg: oklch(99% 0 0);
        --color-danger: oklch(62% 0.25 25);
        /* Red */
        --color-danger-fg: oklch(99% 0 0);
        --color-info: oklch(70% 0.20 225);
        /* Blue */
        --color-info-fg: oklch(99% 0 0);

        /* Derived Roles (auto-calculated) */
        --color-bg: var(--color-primary);
        --color-bg-surface: color-mix(in oklch, var(--color-primary) 95%, var(--color-secondary));
        --color-bg-subtle: color-mix(in oklch, var(--color-primary) 90%, var(--color-secondary));
        --color-bg-muted: color-mix(in oklch, var(--color-primary) 85%, var(--color-secondary));
        --color-fg-1: var(--color-secondary);
        --color-fg-2: color-mix(in oklch, var(--color-secondary) 90%, transparent);
        --color-fg-3: color-mix(in oklch, var(--color-secondary) 80%, transparent);
        --color-fg-4: color-mix(in oklch, var(--color-secondary) 70%, transparent);

        /* Borders/Focus (iamsajid: light borders simulate depth) */
        --border-color: color-mix(in oklch, var(--color-primary) 95%, var(--color-secondary));
        --border-focus: var(--color-accent);
        --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);

        /* Dark Mode values (will be used conditionally in themes) */
        --color-primary-dark: oklch(15% 0.02 240);
        --color-secondary-dark: oklch(95% 0.03 240);
        --color-accent-dark: oklch(75% 0.28 260);

        /* ========================================
       EASING / MOTION CURVES (Sajid-style)
       ======================================= */
        --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1.05);
        --ease-emphasis: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

        --motion-xs: 100ms;
        --motion-sm: 150ms;
        --motion-md: 200ms;
        --motion-lg: 250ms;

        /* ========================================
       SPACING: 4px Exponential (Unchanged)
       ======================================= */
        --space-1: 0.25rem;
        /* 4px  */
        --space-2: 0.5rem;
        /* 8px  */
        --space-3: 0.75rem;
        /* 12px */
        --space-4: 1rem;
        /* 16px */
        --space-5: 1.25rem;
        /* 20px */
        --space-6: 1.5rem;
        /* 24px */
        --space-8: 2rem;
        /* 32px */
        --space-10: 3rem;
        /* 48px */
        --space-12: 4rem;
        /* 64px */

        /* Optional extras for utilities */
        --space-16: 4rem;
        /* 64px again */
        --space-20: 5rem;
        /* 80px */

        /* ========================================
       RADIUS: iamsajid-Inspired (Subtle → Bold)
       ======================================= */
        --radius-xs: 0.25rem;
        /* 4px  */
        --radius-sm: 0.375rem;
        /* 6px  */
        --radius-md: 0.5rem;
        /* 8px  */
        --radius-lg: 0.75rem;
        /* 12px */
        --radius-xl: 1rem;
        /* 16px */
        --radius-2xl: 1.5rem;
        /* 24px */

        /* ========================================
       ELEVATIONS: iamsajid Shadows (Depth Simulation)
       ======================================= */
        --elevation-xs: 0 0 0 1px color-mix(in oklch, var(--border-color) 50%, transparent);
        --elevation-sm: 0 1px 3px 0 color-mix(in oklch, var(--color-secondary) 10%, transparent);
        --elevation-md: 0 4px 6px -1px color-mix(in oklch, var(--color-secondary) 15%, transparent);
        --elevation-lg: 0 10px 15px -3px color-mix(in oklch, var(--color-secondary) 20%, transparent);
        --elevation-xl: 0 25px 50px -12px color-mix(in oklch, var(--color-secondary) 25%, transparent);

        /* Extra “strong” shadow class helper */
        --elevation-2xl: 0 30px 60px -20px color-mix(in oklch, var(--color-secondary) 30%, transparent);

        /* ========================================
       TYPOGRAPHY: Fluid Scale (iamsajid Stacks)
       ======================================= */
        --font-stack: system-ui, -apple-system, sans-serif;

        --font-size-xs: clamp(0.7rem, 0.6rem + 0.2vw, 0.8rem);
        --font-size-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.95rem);
        --font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
        --font-size-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
        --font-size-xl: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
        --font-size-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
        --font-size-3xl: clamp(2.25rem, 2rem + 1.2vw, 3.5rem);
        --font-size-4xl: clamp(3rem, 2.5rem + 2vw, 4.5rem);

        /* Line heights */
        --line-height-tight: 1.2;
        --line-height-normal: 1.4;
        --line-height-relaxed: 1.6;
    }

    /* Typography base */
    html {
        font: 1rem / var(--line-height-relaxed) var(--font-stack);
        color: var(--color-fg-1);
    }

    /* Fallbacks for OKLCH (HSL simplicity) */
    @supports not (color: oklch(0 0 0)) {
        :root {
            --color-primary: hsl(240 10% 98%);
            /* #f8f9ff   */
            --color-secondary: hsl(240 10% 10%);
            /* #1a1b2e   */
            --color-accent: hsl(260 80% 60%);
            /* #a78bfa   */
            --color-accent-fg: hsl(0 0% 100%);
            /* white      */

            --color-success: hsl(145 60% 40%);
            /* Green      */
            --color-danger: hsl(25 85% 55%);
            /* Red        */
            --color-warning: hsl(85 60% 45%);
            /* Amber      */
            --color-info: hsl(225 60% 45%);
            /* Blue       */
        }
    }
}

/* ==========================================================================
   OBJECTS LAYER: Cube CSS Layout Primitives (2026 Enhanced)
   ========================================================================== */
@layer objects {

    /* ========================================
     1. CONTAINER: Fluid + Logical (Viewport‑First)
     ======================================= */
    .o-container {
        width: 100%;
        margin-inline: auto;
        padding-inline: clamp(var(--space-4), 5vw, var(--space-8));
        max-inline-size: clamp(20rem, 90ch, 75rem);

        @media (min-width: 1200px) {
            max-inline-size: clamp(90ch, 85vw, 110rem);
        }

        @media (min-width: 1920px) {
            max-inline-size: clamp(110ch, 90vw, 140rem);
        }

        background: var(--color-bg);
    }

    /* ========================================
     2. STACK: Vertical Flow (Sajid: Gap Scale Default)
     ======================================= */
    .o-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .o-stack--compact {
        gap: var(--space-2);
    }

    .o-stack--loose {
        gap: var(--space-6);
    }

    .o-stack--none {
        gap: 0;
    }

    /* ========================================
     3. CLUSTER: Horizontal Groups (Sajid: Tags/Buttons)
     ======================================= */
    .o-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .o-cluster--center {
        justify-content: center;
    }

    .o-cluster--between {
        justify-content: space-between;
    }

    .o-cluster--stretch {
        justify-content: stretch;
    }

    /* ========================================
     4. FLOW: Inline Text (Sajid: Paragraphs/Lists)
     ======================================= */
    .o-flow {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .o-flow--inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
    }

    /* ========================================
     5. VISUAL GRID: Cards/Images (Sajid: Subgrid‑Aware) + o-grid
     ======================================= */
    .o-grid {
        display: grid;
        gap: var(--space-4);
    }

    .o-visual-grid {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    }

    /* ========================================
     6. FRAME: Perfect Centering (Sajid: Media/Icons)
     ======================================= */
    .o-frame {
        display: grid;
        place-items: center;
    }

    .o-aspect-square {
        aspect-ratio: 1;
    }

    .o-aspect-wide {
        aspect-ratio: 16 / 9;
    }

    .o-aspect-tall {
        aspect-ratio: 9 / 16;
    }

    .o-cover {
        position: relative;
        overflow: hidden;
        border-radius: inherit;
    }

    .o-cover>* {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ========================================
     7. SIDEBAR: Logical 2‑Col (Sajid: Doc Layouts)
     ======================================= */
    .o-doc {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) 3fr;
        gap: var(--space-8);
        min-block-size: 100vh;
    }

    .o-doc--invert {
        grid-template-columns: 3fr minmax(16rem, 1fr);
    }

    /* ========================================
     8. BREADCRUMB: Nav Trail (Sajid: Compact)
     ======================================= */
    .o-breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--font-size-sm);
        color: var(--color-fg-3);
    }

    .o-breadcrumb>*:not(:last-child)::after {
        content: "›";
        margin-inline-start: var(--space-1);
        color: var(--color-fg-4);
        font-weight: 700;
    }

    /* ========================================
     9. HERO: Full‑Width Banner (Sajid: Gradient + CTA)
     ======================================= */
    .o-hero {
        inline-size: 100%;
        block-size: clamp(20rem, 50vh, 40rem);
        padding: clamp(var(--space-8), 8vw, var(--space-12));
        display: grid;
        place-items: center;
        text-align: center;
        color: var(--color-accent-fg);
    }

    /* ========================================
     10. SECTION: Content Wrapper (Sajid: Bleed Control)
     ======================================= */
    .o-section {
        padding-block: var(--space-12);
        border-block-end: 1px solid var(--border-color);
    }

    .o-section--flush {
        padding-block: 0;
    }

    .o-section--inset {
        padding-inline: clamp(var(--space-4), 5vw, var(--space-8));
    }

    /* ========================================
     11. VISUALLY HIDDEN (Sajid: A11y First)
     ======================================= */
    .o-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 Queries (Sajid 2026: Responsive Blocks) */
    .o-block {
        container-type: inline-size;
    }

    @container (min-width: 30em) {
        .o-block {
            padding-block: var(--space-6);
        }
    }
}

/* ==========================================================================
   COMPONENTS LAYER: BEM Blocks (Theme-Agnostic, 2026 Production)
   ========================================================================== */
/* ==========================================================================
   COMPONENTS LAYER: BEM Blocks (Theme‑Agnostic, 2026 Production)
   ========================================================================== */
@layer components {

    /* ========================================
     BUTTON: Minimal Variants (Sajid: Primary + Ghost)
     ======================================= */
    .c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font: inherit;
        font-weight: 500;
        line-height: 1.4;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.15s var(--ease-in-out),
            color 0.15s var(--ease-in-out),
            box-shadow 0.15s var(--ease-in-out),
            transform 0.15s var(--ease-out);
        color: var(--color-accent-fg);
        background: var(--color-accent);
        min-inline-size: clamp(6rem, 10ch, 12rem);
        accent-color: var(--color-accent-fg);
    }

    .c-btn:hover:not(:disabled) {
        background: color-mix(in oklch, var(--color-accent) 90%, black);
        box-shadow: var(--elevation-sm);
        transform: translateY(-1px);
    }

    .c-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 20%, transparent);
    }

    .c-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* Ghost Variant */
    .c-btn--ghost {
        background: transparent;
        color: var(--color-accent);
        border-color: color-mix(in oklch, var(--color-accent) 15%, transparent);
    }

    .c-btn--ghost:hover:not(:disabled) {
        background: color-mix(in oklch, var(--color-accent) 95%, transparent);
    }

    /* Sizes */
    .c-btn--sm {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-sm);
    }

    .c-btn--lg {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-base);
    }

    /* THEME TOGGLE */
    .c-theme-toggle {
        display: grid;
        place-items: center;
        width: 2.75rem;
        aspect-ratio: 1;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--color-bg-surface);
        cursor: pointer;
        transition: background 0.2s var(--ease-out),
            box-shadow 0.2s var(--ease-out);
        font-size: var(--font-size-sm);
        color: var(--color-fg-2);
    }

    .c-theme-toggle:hover {
        background: var(--color-bg-subtle);
        box-shadow: var(--elevation-xs);
    }

    /* ========================================
     CARD: Surface + Elevation
     ======================================= */
    .c-card {
        background: var(--color-bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--elevation-xs);
        overflow: hidden;
        transition: box-shadow 0.2s var(--ease-emphasis), transform 0.2s var(--ease-out);
    }

    .c-card:hover {
        box-shadow: var(--elevation-md);
        transform: translateY(-2px);
    }

    .c-card__header {
        padding: var(--space-6) var(--space-6) var(--space-4);
        border-block-end: 1px solid var(--border-color);
    }

    .c-card__body {
        padding: var(--space-6);
    }

    .c-card__footer {
        padding: var(--space-4) var(--space-6) var(--space-6);
        border-block-start: 1px solid var(--border-color);
    }

    /* ========================================
     INPUTS: Native Feel + States
     ======================================= */
    .c-input,
    .c-textarea,
    .c-select {
        display: block;
        width: 100%;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--color-bg);
        color: var(--color-fg-1);
        font: inherit;
        font-size: var(--font-size-base);
        line-height: 1.5;
        transition: border-color 0.15s var(--ease-out),
            box-shadow 0.15s var(--ease-out);
    }

    .c-input:focus,
    .c-textarea:focus,
    .c-select:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 10%, transparent);
    }

    .c-input:invalid,
    .c-input--error {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 10%, transparent);
    }

    /* ========================================
     FORM CONTROLS (checkbox, radio)
     ======================================= */
    .c-checkbox,
    .c-radio {
        width: 1.25rem;
        height: 1.25rem;
        accent-color: var(--color-accent);
        margin-inline-end: var(--space-3);
    }

    /* ========================================
     ALERTS: Complete Semantic Set
     ======================================= */
    .c-alert {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        border: 1px solid;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
    }

    .c-alert--success {
        background: color-mix(in oklch, var(--color-success) 8%, transparent);
        border-color: color-mix(in oklch, var(--color-success) 20%, transparent);
        color: var(--color-success);
    }

    .c-alert--danger {
        background: color-mix(in oklch, var(--color-danger) 8%, transparent);
        border-color: color-mix(in oklch, var(--color-danger) 20%, transparent);
        color: var(--color-danger);
    }

    .c-alert--warning {
        background: color-mix(in oklch, var(--color-warning) 8%, transparent);
        border-color: color-mix(in oklch, var(--color-warning) 20%, transparent);
        color: var(--color-warning);
    }

    .c-alert--info {
        background: color-mix(in oklch, var(--color-info) 8%, transparent);
        border-color: color-mix(in oklch, var(--color-info) 20%, transparent);
        color: var(--color-info);
    }

    .c-alert__close {
        margin-inline-start: auto;
        padding: var(--space-1);
        background: none;
        border: none;
        font-size: var(--font-size-lg);
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s var(--ease-out);
    }

    .c-alert__close:hover {
        opacity: 1;
    }

    /* ========================================
     HEADER
     ======================================= */
    .c-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: color-mix(in oklch, var(--color-bg-surface) 90%, transparent);
        backdrop-filter: blur(20px);
        border-block-end: 1px solid var(--border-color);
    }

    .c-header__inner {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-8));
        max-inline-size: 90ch;
        margin-inline: auto;
    }

    /* ========================================
     MODAL: Overlay System
     ======================================= */
    .c-modal {
        position: fixed;
        inset: 0;
        background: color-mix(in oklch, var(--color-bg) 80%, transparent);
        display: grid;
        place-items: center;
        padding: var(--space-8);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s var(--ease-emphasis),
            visibility 0.25s linear,
            transform 0.25s var(--ease-out);
        z-index: 1000;
    }

    .c-modal[data-open] {
        opacity: 1;
        visibility: visible;
    }

    .c-modal__panel {
        background: var(--color-bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: var(--space-8);
        max-inline-size: min(90vw, 32rem);
        max-block-size: 90vh;
        overflow-y: auto;
        box-shadow: var(--elevation-xl);
        animation: modal-expand 0.25s var(--ease-emphasis) forwards;
    }

    @keyframes modal-expand {
        from {
            scale: 0.92;
            opacity: 0.8;
        }

        to {
            scale: 1;
            opacity: 1;
        }
    }

    /* ========================================
     NAVIGATION
     ======================================= */
    .c-nav {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .c-nav-link {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        color: var(--color-fg-2);
        text-decoration: none;
        transition: color 0.2s var(--ease-out),
            background 0.2s var(--ease-out),
            border 0.2s var(--ease-out);
        font-weight: 500;
    }

    .c-nav-link:hover,
    .c-nav-link--active {
        background: var(--color-bg-subtle);
        color: var(--color-accent);
    }
}
/* ==========================================================================
   UTILITIES LAYER: Atomic Classes (2026: Layer Precedence, No )
   ========================================================================== */
@layer utilities {

    /* ========================================
     DISPLAY & POSITION (Sajid: Essential Only)
     ======================================= */
    .u-none {
        display: none;
    }

    .u-block {
        display: block;
    }

    .u-inline {
        display: inline;
    }

    .u-flex {
        display: flex;
    }

    .u-inline-flex {
        display: inline-flex;
    }

    .u-grid {
        display: grid;
    }

    .u-static {
        position: static;
    }

    .u-relative {
        position: relative;
    }

    .u-absolute {
        position: absolute;
    }

    .u-fixed {
        position: fixed;
    }

    .u-sticky {
        position: sticky;
    }

    .u-inset-0 {
        inset: 0;
    }

    .u-top-0 {
        top: 0;
    }

    .u-z-10 {
        z-index: 10;
    }

    .u-z-50 {
        z-index: 50;
    }

    /* ========================================
     FLEX & ALIGN (Logical, Sajid: Complete)
     ======================================= */
    .u-flex-1 {
        flex: 1 1 0%;
    }

    .u-flex-auto {
        flex: 1 1 auto;
    }

    .u-flex-col {
        flex-direction: column;
    }

    .u-flex-wrap {
        flex-wrap: wrap;
    }

    .u-items-center {
        align-items: center;
    }

    .u-items-stretch {
        align-items: stretch;
    }

    .u-items-start {
        align-items: flex-start;
    }

    .u-items-end {
        align-items: flex-end;
    }

    .u-justify-center {
        justify-content: center;
    }

    .u-justify-between {
        justify-content: space-between;
    }

    .u-justify-evenly {
        justify-content: space-evenly;
    }

    .u-justify-start {
        justify-content: flex-start;
    }

    .u-justify-end {
        justify-content: flex-end;
    }

    .u-place-items-center {
        place-items: center;
    }

    .u-self-start {
        align-self: flex-start;
    }

    .u-self-center {
        align-self: center;
    }

    /* ========================================
     SIZING (Logical, Clamp-Based)
     ======================================= */
    .u-w-full {
        width: 100%;
    }

    .u-w-auto {
        width: auto;
    }

    .u-max-w-sm {
        max-width: 24rem;
    }

    .u-max-w-md {
        max-width: 32rem;
    }

    .u-max-w-lg {
        max-width: 48rem;
    }

    .u-max-w-xl {
        max-width: 64rem;
    }

    .u-max-w-2xl {
        max-width: 80rem;
    }

    .u-max-w-4xl {
        max-width: 96rem;
    }

    .u-max-w-6xl {
        max-width: 112rem;
    }

    .u-max-w-90ch {
        max-inline-size: 90ch;
    }

    .u-h-full {
        height: 100%;
    }

    .u-min-h-screen {
        min-height: 100vh;
    }

    /* ========================================
     SPACING: Logical + Exponential (Sajid Complete)
     ======================================= */
    .u-m-0 {
        margin: 0;
    }

    .u-mx-auto {
        margin-inline: auto;
    }

    .u-my-auto {
        margin-block: auto;
    }

    .u-mt-0 {
        margin-block-start: 0;
    }

    .u-mb-0 {
        margin-block-end: 0;
    }

    .u-mt-4 {
        margin-block-start: var(--space-4);
    }

    .u-mb-4 {
        margin-block-end: var(--space-4);
    }

    .u-mt-6 {
        margin-block-start: var(--space-6);
    }

    .u-mb-6 {
        margin-block-end: var(--space-6);
    }

    .u-mt-auto {
        margin-block-start: auto;
    }

    .u-p-0 {
        padding: 0;
    }

    .u-p-4 {
        padding: var(--space-4);
    }

    .u-p-6 {
        padding: var(--space-6);
    }

    .u-p-8 {
        padding: var(--space-8);
    }

    .u-p-12 {
        padding: var(--space-12);
    }

    .u-p-16 {
        padding: var(--space-16);
    }

    .u-px-2 {
        padding-inline: var(--space-2);
    }

    .u-px-4 {
        padding-inline: var(--space-4);
    }

    .u-py-4 {
        padding-block: var(--space-4);
    }

    .u-py-12 {
        padding-block: var(--space-12);
    }

    /* COMPLETE GAPS */
    .u-gap-0 {
        gap: 0;
    }

    .u-gap-2 {
        gap: var(--space-2);
    }

    .u-gap-3 {
        gap: var(--space-3);
    }

    .u-gap-4 {
        gap: var(--space-4);
    }

    .u-gap-6 {
        gap: var(--space-6);
    }

    .u-gap-8 {
        gap: var(--space-8);
    }

    .u-gap-12 {
        gap: var(--space-12);
    }

    .u-gap-16 {
        gap: var(--space-16);
    }

    .u-gap-20 {
        gap: var(--space-20);
    }

    /* ========================================
     TYPOGRAPHY: Fluid Scale (Sajid Stacks)
     ======================================= */
    .u-text-left {
        text-align: start;
    }

    .u-text-center {
        text-align: center;
    }

    .u-text-xs {
        font-size: var(--font-size-xs);
    }

    .u-text-sm {
        font-size: var(--font-size-sm);
    }

    .u-text-base {
        font-size: var(--font-size-base);
    }

    .u-text-lg {
        font-size: var(--font-size-lg);
    }

    .u-text-xl {
        font-size: var(--font-size-xl);
    }

    .u-text-2xl {
        font-size: var(--font-size-2xl);
    }

    .u-text-3xl {
        font-size: var(--font-size-3xl);
    }

    .u-text-4xl {
        font-size: var(--font-size-4xl);
    }

    .u-font-bold {
        font-weight: 700;
    }

    .u-font-semibold {
        font-weight: 600;
    }

    .u-font-medium {
        font-weight: 500;
    }

    .u-leading-tight {
        line-height: 1.2;
    }

    .u-leading-normal {
        line-height: 1.4;
    }

    .u-leading-relaxed {
        line-height: 1.6;
    }

    .u-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ========================================
     BORDERS & RADIUS (Sajid: Consistent)
     ======================================= */
    .u-border {
        border: 1px solid var(--border-color);
    }

    .u-border-t {
        border-block-start: 1px solid var(--border-color);
    }

    .u-border-b {
        border-block-end: 1px solid var(--border-color);
    }

    .u-rounded-sm {
        border-radius: var(--radius-sm);
    }

    .u-rounded-md {
        border-radius: var(--radius-md);
    }

    .u-rounded-lg {
        border-radius: var(--radius-lg);
    }

    .u-rounded-xl {
        border-radius: var(--radius-xl);
    }

    .u-rounded-2xl {
        border-radius: var(--radius-2xl);
    }

    /* ========================================
     SHADOWS: Semantic (Sajid Depth Simulation)
     ======================================= */
    .u-shadow-xs {
        box-shadow: var(--elevation-xs);
    }

    .u-shadow-sm {
        box-shadow: var(--elevation-sm);
    }

    .u-shadow-md {
        box-shadow: var(--elevation-md);
    }

    .u-shadow-lg {
        box-shadow: var(--elevation-lg);
    }

    .u-shadow-xl {
        box-shadow: var(--elevation-xl);
    }

    .u-shadow-2xl {
        box-shadow: var(--elevation-2xl);
    }

    /* ========================================
     COLORS: Semantic (Sajid 4-Color Derived)
     ======================================= */
    .u-text-primary {
        color: var(--color-accent);
    }

    .u-text-success {
        color: var(--color-success);
    }

    .u-text-warning {
        color: var(--color-warning);
    }

    .u-text-danger {
        color: var(--color-danger);
    }

    .u-text-info {
        color: var(--color-info);
    }

    .u-text-muted {
        color: var(--color-fg-3);
    }

    .u-bg-primary {
        background: var(--color-accent);
    }

    .u-bg-success {
        background: var(--color-success);
    }

    .u-bg-surface {
        background: var(--color-bg-surface);
    }

    .u-gradient-primary {
        background: linear-gradient(135deg,
                var(--color-accent),
                color-mix(in oklch, var(--color-accent) 80% hsl(260 20% 70%)));
    }

    /* ========================================
     TRANSITIONS & EFFECTS (Sajid Motion + STATES)
     ======================================= */
    .u-transition {
        transition: background 0.2s var(--ease-out),
            color 0.2s var(--ease-out),
            border-color 0.2s var(--ease-out),
            box-shadow 0.2s var(--ease-out),
            transform 0.2s var(--ease-out),
            opacity 0.2s var(--ease-out);
    }

    .u-hover\:shadow-lg:hover {
        box-shadow: var(--elevation-lg);
    }

    .u-hover\:-translate-y-1:hover {
        transform: translateY(-0.25rem);
    }

    .u-hover\:-translate-y-2:hover {
        transform: translateY(-0.5rem);
    }

    .u-hover\:scale-105:hover {
        transform: scale(1.05);
    }

    .u-active\:scale-95:active {
        transform: scale(0.95);
    }

    .u-focus\:ring-2:focus {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .u-backdrop-blur {
        backdrop-filter: blur(12px);
    }

    .u-opacity-75 {
        opacity: 0.75;
    }

    /* ========================================
     INTERACTION & RESPONSIVE (Container-First)
     ======================================= */
    .u-cursor-pointer {
        cursor: pointer;
    }

    .u-select-none {
        user-select: none;
    }

    .u-overflow-hidden {
        overflow: hidden;
    }

    .u-container {
        container-type: inline-size;
    }

    /* RESPONSIVE CONTAINER QUERIES (NEW) */
    @container (min-width: 30em) {
        .u-sm\:flex-col {
            flex-direction: column;
        }

        .u-sm\:gap-4 {
            gap: var(--space-4);
        }

        .u-sm\:p-8 {
            padding: var(--space-8);
        }

        .u-sm\:text-base {
            font-size: var(--font-size-base);
        }

        .u-sm\:max-w-lg {
            max-width: 48rem;
        }
    }

    @container (min-width: 50em) {
        .u-md\:grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .u-md\:grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .u-md\:max-w-4xl {
            max-width: 96rem;
        }

        .u-md\:p-12 {
            padding: var(--space-12);
        }
    }

    @container (min-width: 70em) {
        .u-lg\:gap-6 {
            gap: var(--space-6);
        }

        .u-lg\:text-lg {
            font-size: var(--font-size-lg);
        }
    }

    /* Print */
    @media print {
        .u-print\:none {
            display: none;
        }
    }
}

/* ==========================================================================
   THEMES LAYER: Semantic Color Schemes (2026: OKLCH + Native Dark Mode)
   ========================================================================= */
@layer themes {

    /* ========================================
     NATIVE COLOR-SCHEME (Sajid: Zero JS Default)
     ======================================= */
    :root {
        color-scheme: light dark;
    }

    /* Light Mode (Sajid: High Contrast Primary Canvas) */
    .theme-light,
    :root:not([data-theme="dark"]) {
        --color-primary: oklch(98% 0.01 240);
        /* Canvas      */
        --color-secondary: oklch(12% 0.03 240);
        /* Foreground  */
        --color-accent: oklch(68% 0.26 260);
        /* Action      */
        --color-accent-fg: oklch(100% 0 0);
        /* Accent text */
    }

    /* Dark Mode (Sajid: Invert Primary/Secondary) */
    [data-theme="dark"],
    .theme-dark {
        --color-primary: oklch(15% 0.02 240);
        /* Dark canvas */
        --color-secondary: oklch(96% 0.02 240);
        /* Light fg    */
        --color-accent: oklch(78% 0.26 260);
        /* Lighter accent */
    }

    /* System Preference (Zero Config) */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) {
            --color-primary: var(--color-primary-dark);
            --color-secondary: var(--color-secondary-dark);
            --color-accent: var(--color-accent-dark);
        }
    }

    /* ========================================
     HIGH-CONTRAST MODE (Sajid: Accessibility)
     ======================================= */
    @media (prefers-contrast: high) {
        :root {
            --color-primary: oklch(100% 0 0);
            --color-secondary: oklch(0% 0 0);
            --color-accent: oklch(50% 0.4 240);
            --border-color: oklch(0% 0 0);
            --color-warning: oklch(100% 0 0);
        }
    }

    /* ========================================
     THEME TOGGLE (Sajid: Single Button)
     ======================================= */
    .c-theme-toggle {
        display: grid;
        place-items: center;
        width: 2.75rem;
        aspect-ratio: 1;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--color-bg-surface);
        cursor: pointer;
        transition: background 0.2s var(--ease-out),
            box-shadow 0.2s var(--ease-out),
            color 0.2s var(--ease-out);
        font-size: var(--font-size-sm);
        color: var(--color-fg-2);
    }

    .c-theme-toggle:hover {
        background: var(--color-bg-subtle);
        box-shadow: var(--elevation-xs);
    }

    /* Toggle States (Emoji Icons) */
    .c-theme-toggle[data-theme="light"]::before {
        content: "☀️";
    }

    .c-theme-toggle[data-theme="dark"]::before {
        content: "🌙";
    }

    /* ========================================
     BRAND THEMES (Sajid: CSS Class Switch)
     ======================================= */
    .theme--blue {
        --color-accent: oklch(68% 0.28 240);
    }

    .theme--green {
        --color-accent: oklch(70% 0.25 160);
    }

    .theme--purple {
        --color-accent: oklch(72% 0.27 280);
    }

    /* ========================================
     PRINT MODE (Sajid: Ink-Saver)
     ======================================= */
    @media print {
        :root {
            --color-accent: hsl(240 100% 20%);
            --color-primary: white;
            --color-secondary: black;
        }

        * {
            box-shadow: none;
            text-shadow: none;
        }

        a[href]::after {
            content: " (" attr(href) ")";
            font-size: 0.8em;
            color: currentColor;
        }
    }

    /* ========================================
     REDUCED DATA (Sajid: Performance)
     ======================================= */
    @media (prefers-reduced-data: reduce) {
        * {
            box-shadow: none;
        }

        .u-backdrop-blur {
            backdrop-filter: none;
        }
    }
}

/* ==========================================================================
   HTMX LAYER: Visual Feedback & Transitions (2026)
   ========================================================================= */
@layer htmx {

    /* 1. REQUEST STATE (Button / Form UI) */
    .htmx-request {
        opacity: 0.7;
        pointer-events: none;
        transition: opacity 0.15s var(--ease-out);
    }

    .htmx-request .c-btn {
        transform: translateY(0);
        box-shadow: none;
    }


    /* 2. LOADING INDICATOR (base) */
    .htmx-indicator {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s var(--ease-out);
    }

    .htmx-request .htmx-indicator,
    .htmx-indicator.htmx-request {
        opacity: 1;
        visibility: visible;
    }


    /* 3. DOTS SPINNER (inside buttons / inline) */
    .htmx-indicator-dots {
        position: relative;
        display: inline-block;
        width: 0.75rem;
        height: 1em;
    }

    .htmx-indicator-dots::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        animation: htmx-dots 1.2s linear infinite;
    }

    @keyframes htmx-dots {
        0% {
            content: ".";
        }

        33% {
            content: "..";
        }

        66% {
            content: "...";
        }

        100% {
            content: ".";
        }
    }


    /* 4. CIRCLE / SPINNER */
    .htmx-indicator-circle {
        --size: 0.875rem;
        --thickness: 2px;
        display: inline-block;
        vertical-align: middle;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        border: var(--thickness) solid var(--color-fg-2, #666);
        border-top-color: transparent;
        animation: htmx-circle 0.8s linear infinite;
        opacity: 0;
        transition: opacity 0.2s var(--ease-out);
    }

    @keyframes htmx-circle {
        to {
            transform: rotate(360deg);
        }
    }


    /* 5. PULSE / INLINE BLOCK LOADER */
    .c-htmx-inline-loading {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        background-color: var(--color-bg-subtle);
        border: 1px solid var(--border-color);
        font-size: var(--font-size-sm);
        color: var(--color-fg-3);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        animation: htmx-pulse 1.5s ease-in-out infinite;
    }

    @keyframes htmx-pulse {
        0% {
            opacity: 0.5;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0.5;
        }
    }


    /* 6. PROGRESS BAR (optional) */
    .htmx-progress-bar {
        width: 100%;
        height: 4px;
        background-color: var(--color-bg-subtle);
        border-radius: 9999px;
        overflow: hidden;
        /* opacity: 0; */
        transition: opacity 0.2s var(--ease-out);
    }

    .htmx-progress-bar-inner {
        height: 100%;
        background-color: var(--color-accent);
        width: 0%;
        transition: width 0.3s var(--ease-out);
    }

    .htmx-progress-bar-inner.bar-0 {
        width: 0.01%;
    }

    .htmx-progress-bar-inner.bar-10 {
        width: 10%;
    }

    .htmx-progress-bar-inner.bar-20 {
        width: 20%;
    }

    .htmx-progress-bar-inner.bar-30 {
        width: 30%;
    }

    .htmx-progress-bar-inner.bar-40 {
        width: 40%;
    }

    .htmx-progress-bar-inner.bar-50 {
        width: 50%;
    }

    .htmx-progress-bar-inner.bar-60 {
        width: 60%;
    }

    .htmx-progress-bar-inner.bar-70 {
        width: 70%;
    }

    .htmx-progress-bar-inner.bar-80 {
        width: 80%;
    }

    .htmx-progress-bar-inner.bar-90 {
        width: 90%;
    }

    .htmx-progress-bar-inner.bar-100 {
        width: 100%;
    }

    /* 5. TRANSITIONS ON ADD/SWAP */
    .htmx-added,
    .htmx-settling,
    .htmx-swapping {
        transition: opacity 0.2s var(--ease-out),
            transform 0.2s var(--ease-out);
    }

    .htmx-added {
        opacity: 0;
        transform: translateY(0.25rem);
    }

    .htmx-settling,
    .htmx-swapping {
        opacity: 1;
        transform: translateY(0);
    }


    /* 6. DISABLED ELEMENTS */
    [data-hx-disabled-elt] {
        pointer-events: none;
    }

    [data-hx-disabled-elt] .c-btn {
        opacity: 0.65;
        transform: none;
        box-shadow: none;
    }


    /* 7. HISTORY NAVIGATION FADE‑IN */
    .htmx-history {
        animation: htmx-history-fade-in 0.3s var(--ease-out) forwards;
    }

    @keyframes htmx-history-fade-in {
        from {
            opacity: 0;
            transform: translateY(0.25rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    /* 9. SUCCESS / ERROR */
    .htmx-error {
        border: 2px solid var(--color-danger);
        background-color: color-mix(in oklch, var(--color-danger) 10%, var(--color-bg));
        padding: var(--space-4);
        border-radius: var(--radius-md);
        color: var(--color-danger-fg);
        box-shadow: var(--elevation-sm);
    }

    .htmx-success {
        border: 2px solid var(--color-success);
        background-color: color-mix(in oklch, var(--color-success) 10%, var(--color-bg));
        padding: var(--space-4);
        border-radius: var(--radius-md);
        color: var(--color-success-fg);
        box-shadow: var(--elevation-sm);
    }


    /* 10. GLOBAL ANIMATION OVERRIDES */
    .c-card .htmx-added,
    .c-card .htmx-settling,
    .c-card .htmx-swapping {
        transform: none;
        box-shadow: var(--elevation-sm);
    }

    .c-card .htmx-added {
        opacity: 0.4;
    }

    .c-card .htmx-settling,
    .c-card .htmx-swapping {
        opacity: 1;
    }
}