/* ============================================================
   Morclave ACCOUNTING — SHARED DESIGN TOKENS
   Used by index.html and offer.html.
   Page-specific stylesheets load AFTER this and may override.
   Cascade is managed via @layer (base < components < utilities).
   Page-inline <style> blocks remain UNlayered, so they win
   over anything in these layers — no !important needed.
   ============================================================ */

@layer base, components, utilities;

/* ===== BASE ===== */
@layer base {
    :root {
        --primary: #0473ea;
        --primary-dark: #0360c4;
        --primary-light: #5a9ff5;
        --primary-ultra: #d6e9ff;
        --accent: #5fcb3a;
        --accent-dark: #4caf28;
        --accent-light: #6ed94a;
        --danger: #e05252;
        --danger-soft: #f87171;
        --text: #292929;
        --text-2: #3f4147;
        --text-3: #6b7079;
        --text-muted: #888b90;
        --white: #ffffff;
        --bg: #ffffff;
        --bg-2: #f6f8fb;
        --bg-3: #edf1f7;
        --border: #e4e8ee;
        --border-2: #d0d5dd;

        /* Navy scale (dark surfaces) */
        --navy-900: #0a1628;
        --navy-800: #0b1c36;
        --navy-700: #0e2244;
        --navy-600: #122a54;
        --navy-500: #1a3a6e;

        /* Elevation tiers */
        --lift-sm: -2px;
        --lift-md: -6px;

        /* Shadow tokens */
        --sh-sm: 0 4px 16px rgba(17,24,39,.06);
        --sh-md: 0 12px 40px rgba(17,24,39,.08);
        --sh-lg: 0 24px 64px rgba(17,24,39,.10);
        --sh-brand-sm: 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent);

        /* Unified card system */
        --card-radius: 22px;
        --card-pad: 36px 30px;
        --icon-size: 52px;
        --icon-radius: 14px;

        /* Spacing scale */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --space-8: 64px;

        --display: 'Montserrat', sans-serif;
        --body: 'Karla', sans-serif;
        --ease: cubic-bezier(.4,0,.2,1);
        --spring: cubic-bezier(.34,1.56,.64,1);

        /* Tint native form controls with brand color */
        accent-color: var(--primary);
    }

    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { font-family: inherit; }

    /* Focus */
    :focus { outline: none; }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

    /* Selection */
    ::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--text); }

    /* Typography */
    h1, h2, h3, h4 {
        font-family: var(--display);
        font-weight: 700;
        line-height: 1.12;
        color: var(--text);
        letter-spacing: -.025em;
        text-wrap: balance;
    }
}

/* ===== COMPONENTS ===== */
@layer components {
    /* Eyebrow / tag pill.
       line-height:1 keeps the line-box tight; padding is intentionally
       asymmetric (11 top / 7 bottom) to optically center uppercase letters —
       the descender region inside the line-box is empty for ALL-CAPS, which
       would otherwise make the bottom gap look ~3px larger than the top.
       Total padding (18px) and total height (~32px) match the original. */
    .tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--body);
        font-size: .72rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
        padding: 10px 14px 8px;
        border-radius: 100px;
        margin-bottom: 22px;
    }

    .stitle {
        font-size: clamp(1.85rem, 3.4vw, 2.5rem);
        margin-bottom: var(--space-4);
        letter-spacing: -.02em;
        line-height: 1.15;
    }
    .ssub {
        font-size: clamp(.98rem, 1.4vw, 1.06rem);
        color: var(--text-3);
        max-width: 680px;
        line-height: 1.7;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        font-family: var(--body);
        font-weight: 800;
        font-size: 1rem;
        line-height: 1;
        padding: 18px 36px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        transition:
            background-color .4s var(--ease),
            border-color .4s var(--ease),
            color .4s var(--ease),
            transform .4s var(--ease),
            box-shadow .4s var(--ease);
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* Header CTA — size/weight overrides on top of .btn .btn-w.
       line-height 1.7 restores the original button height (the pre-refactor
       .hdr-cta inherited it from body; .btn sets line-height:1 which would
       otherwise shrink the button by ~8px). */
    .hdr-cta {
        padding: 10px 24px;
        font-size: .84rem;
        font-weight: 700;
        line-height: 1.7;
    }
    .hdr.stuck .hdr-cta {
        background: transparent;
        color: var(--text-3);
        border-color: var(--text-3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .hdr.stuck .hdr-cta:hover {
        color: #fff;
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 6%, transparent);
    }

    /* Primary gradient — canonical CTA (.btn-p and .btn-g are aliases) */
    .btn-p,
    .btn-g {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }
    .btn-g:hover i { transform: translateX(4px); }

    /* Outlined */
    .btn-o {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--border);
    }
    .btn-o:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 4%, transparent);
    }

    /* White / glass (used on dark surfaces) */
    .btn-w {
        background: rgba(255,255,255,.1);
        color: #fff;
        border: 1.5px solid rgba(255,255,255,.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .btn-w:hover {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.3);
    }

    /* Block (full-width) modifier */
    .btn-block { width: 100%; }

    /* Pulse halo (campaign CTA emphasis) */
    .btn-pulse { position: relative; }
    .btn-pulse::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        animation: pulseRing 2.4s ease-out infinite;
        pointer-events: none;
    }
    @keyframes pulseRing {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
        70%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    }

    /* Position-aware button (cursor-tracked accent fill).
       Add `position-aware-button` alongside any .btn variant. Wrap text in
       <span class="label">…</span>. JS in assets/position-aware-button.js. */
    .position-aware-button {
        appearance: none;
        z-index: 1;
        text-transform: capitalize;
        letter-spacing: 0;
    }
    .position-aware-button .label {
        position: relative;
        z-index: 2;
        display: inline-block;
    }
    .position-aware-button .blob {
        position: absolute;
        width: 2px;
        height: 2px;
        margin-left: 0;
        margin-top: 0;
        border: 1px solid var(--accent);
        border-radius: 50%;
        background: var(--accent);
        z-index: -1;
        transition:
            border-width .4s ease-out,
            margin-left .4s ease-out,
            margin-top .4s ease-out;
        pointer-events: none;
    }
    .position-aware-button .blob.expand {
        border-width: 1500px;
        margin-left: -1500px;
        margin-top: -1500px;
        transition:
            border-width .7s ease-in-out,
            margin-left .7s ease-in-out,
            margin-top .7s ease-in-out;
    }
}

/* ===== UTILITIES ===== */
@layer utilities {
    /* Scroll reveal */
    .rv {
        opacity: 0;
        transform: translateY(36px);
        transition: opacity .85s var(--ease), transform .85s var(--ease);
    }
    .rv.vis {
        opacity: 1;
        transform: translateY(0);
    }
    .d1 { transition-delay: .08s; }
    .d2 { transition-delay: .16s; }
    .d3 { transition-delay: .24s; }
    .d4 { transition-delay: .32s; }
    .d5 { transition-delay: .4s; }
}

/* ===== REDUCED MOTION =====
   Kept UNlayered so it always wins, no matter which layer the
   targeted rule lives in. !important only used on the universal
   selector where lower specificity would otherwise lose to .btn etc. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn-pulse::after { animation: none; }
    .rv { opacity: 1; transform: none; }
    .position-aware-button .label,
    .position-aware-button .blob { transition: none; }
}