/*
   Activation King — Design Tokens
   ================================
   Single source of truth for color, typography, spacing, shadows, radii.
   Reference: /ai-photo-booth-software landing aesthetic (dark hero,
   coral→gold gradient on emphasis, light content surfaces).
   Goal: Stripe/Linear/Notion-grade visual consistency across every page.
*/

:root {
    /* ===== COLORS ===== */

    /* Brand */
    --c-primary:        #7F56D9;
    --c-primary-deep:   #6941C6;
    --c-primary-soft:   #A78BFA;
    --c-primary-bg:     rgba(127, 86, 217, 0.06);

    --c-accent:         #F43F5E;
    --c-accent-deep:    #E11D48;
    --c-accent-soft:    #FF6B81;
    --c-accent-bg:      rgba(244, 63, 94, 0.06);

    /* Text */
    --c-text:           #101828;
    --c-text-strong:    #050714;
    --c-text-muted:     #667085;
    --c-text-subtle:    #98A2B3;
    --c-text-inverse:   #FFFFFF;

    /* Surfaces */
    --c-bg:             #FFFFFF;
    --c-bg-soft:        #FAFAFB;
    --c-bg-muted:       #F4F5F7;
    --c-bg-dark:        #050210;
    --c-bg-dark-soft:   #0A0518;

    /* Borders */
    --c-border:         #EAECF0;
    --c-border-soft:    #F0F1F4;
    --c-border-strong:  #D0D5DD;
    --c-border-dark:    rgba(255, 255, 255, 0.08);

    /* Semantic */
    --c-success:        #12B76A;
    --c-success-bg:     rgba(18, 183, 106, 0.08);
    --c-warning:        #F79009;
    --c-warning-bg:     rgba(247, 144, 9, 0.08);
    --c-danger:         #F04438;
    --c-danger-bg:      rgba(240, 68, 56, 0.08);
    --c-info:           #2E90FA;
    --c-info-bg:        rgba(46, 144, 250, 0.08);

    /* ===== GRADIENTS ===== */
    --grad-emphasis:    linear-gradient(135deg, var(--c-accent), #FCD34D);
    --grad-cta:         linear-gradient(135deg, var(--c-accent-soft), var(--c-accent));
    --grad-cta-hover:   linear-gradient(135deg, var(--c-accent), var(--c-accent-deep));
    --grad-brand:       linear-gradient(135deg, var(--c-primary), var(--c-accent));
    --grad-hero-bg:     radial-gradient(ellipse at 50% 30%, rgba(127, 86, 217, 0.35) 0%, transparent 55%),
                        radial-gradient(ellipse at 20% 70%, rgba(115, 60, 195, 0.20) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 50%, rgba(200, 100, 180, 0.12) 0%, transparent 45%);

    /* ===== TYPOGRAPHY ===== */
    --font-heading:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-body:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Font sizes — clamp(min, fluid, max) — fluid responsive scaling */
    --fs-display:       clamp(56px, 6vw, 76px);     /* homepage hero only */
    --fs-h1:            clamp(40px, 5vw, 64px);     /* all landings */
    --fs-h1-compact:    clamp(32px, 3.8vw, 52px);   /* legal, pricing, dashboard */
    --fs-h2:            clamp(28px, 3.2vw, 44px);   /* section titles */
    --fs-h2-compact:    clamp(22px, 2.4vw, 32px);   /* card section titles */
    --fs-h3:            clamp(20px, 2vw, 26px);     /* card titles */
    --fs-h4:            18px;
    --fs-h5:            16px;
    --fs-lead:          clamp(17px, 1.6vw, 20px);   /* hero sub */
    --fs-body:          16px;
    --fs-body-sm:       14.5px;
    --fs-meta:          13px;
    --fs-micro:         11.5px;
    --fs-eyebrow:       12px;

    /* Font weights */
    --fw-regular:       400;
    --fw-medium:        500;
    --fw-semibold:      600;
    --fw-bold:          700;
    --fw-extrabold:     800;
    --fw-black:         900;

    /* Line heights */
    --lh-tight:         1.08;
    --lh-snug:          1.2;
    --lh-normal:        1.5;
    --lh-relaxed:       1.65;

    /* Letter spacing */
    --ls-tight:         -0.03em;
    --ls-snug:          -0.02em;
    --ls-normal:        0;
    --ls-wide:          0.04em;
    --ls-eyebrow:       0.08em;

    /* ===== SPACING ===== */
    --s-1:              4px;
    --s-2:              8px;
    --s-3:              12px;
    --s-4:              16px;
    --s-5:              20px;
    --s-6:              24px;
    --s-7:              32px;
    --s-8:              40px;
    --s-9:              48px;
    --s-10:             56px;
    --s-11:             64px;
    --s-12:             80px;
    --s-13:             96px;
    --s-14:             128px;

    /* Section padding (fluid) */
    --section-pad-lg:   clamp(80px, 9vw, 128px);
    --section-pad-md:   clamp(56px, 6vw, 88px);
    --section-pad-sm:   clamp(40px, 4vw, 64px);
    --section-pad-xs:   clamp(24px, 2.5vw, 40px);

    /* Container */
    --container-max:    1280px;
    --container-pad:    clamp(20px, 3vw, 32px);

    /* ===== RADII ===== */
    --radius-xs:        4px;
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-xl:        20px;
    --radius-2xl:       24px;
    --radius-pill:      999px;

    /* ===== SHADOWS ===== */
    --shadow-xs:        0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm:        0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md:        0 4px 8px rgba(16, 24, 40, 0.04), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-lg:        0 8px 16px rgba(16, 24, 40, 0.06), 0 20px 32px -12px rgba(16, 24, 40, 0.12);
    --shadow-xl:        0 16px 24px rgba(16, 24, 40, 0.04), 0 32px 64px -16px rgba(16, 24, 40, 0.16);
    --shadow-glow-primary: 0 12px 32px -8px rgba(127, 86, 217, 0.4);
    --shadow-glow-accent:  0 12px 32px -8px rgba(244, 63, 94, 0.4);

    /* ===== TRANSITIONS / MOTION (canonical — reuse these, don't hardcode) ===== */
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-soft:        cubic-bezier(0.23, 1, 0.32, 1);  /* gentle card/hover ease */
    --duration-fast:    140ms;
    --duration-normal:  240ms;
    --duration-slow:    400ms;
    --duration-page:    800ms;
    /* Hover lift scale (use with a transform transition + a --shadow-* on :hover) */
    --lift-subtle:      translateY(-1px);
    --lift-medium:      translateY(-2px);
    --lift-strong:      translateY(-4px);

    /* ===== MODAL / DIALOG MOTION (canonical — every modal shares this so they
       open & close identically; edit here to retune all of them at once) ===== */
    --modal-dur:        200ms;
    --modal-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ===== SECTION HEADER SCALE (canonical — the landing-grade section H2 +
       sub. Referenced by the has-hero aurora rule AND the self-contained
       marketplace/.rent-* system so a single edit retunes both. Heroes and
       CTA bands keep their own larger/smaller scales on purpose.) ===== */
    --fs-section-h2:    clamp(32px, 3.8vw, 48px);
    --fs-section-sub:   clamp(16px, 1.3vw, 19px);

    /* ===== Z-INDEX ===== */
    --z-base:           1;
    --z-elevated:       10;
    --z-sticky:         50;
    --z-header:         100;
    --z-modal-backdrop: 900;
    --z-modal:          1000;
    --z-toast:          1100;
    --z-popover:        1200;

    /* ===== A11Y / TAP TARGETS ===== */
    --tap-min:          44px;  /* WCAG 2.5.5 — every interactive element ≥ 44×44 */
}

/* ===== Animation engine — UNIFIED API ===========================
   .fade — opacity + translateY on load (use .fade-1..n for stagger)
   .reveal — same, but triggered by IntersectionObserver on scroll
   page-system.js handles both via class toggles (.fade-in, .reveal-in)
   ============================================================== */
.fade,
.reveal,
.pb-fade,
.pb-reveal,
.abt-fade,
.abt-reveal,
.aff-fade,
.aff-reveal,
.glm-fade,
.glm-reveal,
.ksk-fade,
.ksk-reveal,
.scs-fade,
.scs-reveal,
.shp-fade,
.s01-fade,
.s01-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-page) var(--ease-out),
                transform var(--duration-page) var(--ease-out);
}

.fade.fade-in,
.reveal.reveal-in,
.reveal.pb-visible,
.reveal.abt-visible,
.pb-fade.pb-fade-in,
.pb-reveal.pb-visible,
.abt-fade.abt-fade-in,
.abt-reveal.abt-visible,
.aff-fade.aff-fade-in,
.aff-reveal.aff-visible,
.glm-fade.glm-fade-in,
.glm-reveal.glm-visible,
.ksk-fade.ksk-fade-in,
.ksk-reveal.ksk-visible,
.scs-fade.scs-fade-in,
.scs-reveal.scs-visible,
.shp-fade.shp-fade-in,
.s01-fade.s01-fade-in,
.s01-reveal.s01-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays — apply .fade-1, .fade-2 etc. */
.fade-1, .pb-fade-1, .abt-fade-1, .aff-fade-1, .glm-fade-1, .ksk-fade-1, .scs-fade-1, .s01-fade-1 { transition-delay: 0ms; }
.fade-2, .pb-fade-2, .abt-fade-2, .aff-fade-2, .glm-fade-2, .ksk-fade-2, .scs-fade-2, .s01-fade-2 { transition-delay: 100ms; }
.fade-3, .pb-fade-3, .abt-fade-3, .aff-fade-3, .glm-fade-3, .ksk-fade-3, .scs-fade-3, .s01-fade-3 { transition-delay: 200ms; }
.fade-4, .pb-fade-4, .abt-fade-4, .aff-fade-4, .glm-fade-4, .ksk-fade-4, .scs-fade-4, .s01-fade-4 { transition-delay: 300ms; }

.reveal-d1, .pb-reveal-d1, .abt-reveal-d1, .aff-reveal-d1, .glm-reveal-d1, .ksk-reveal-d1, .scs-reveal-d1 { transition-delay: 100ms; }
.reveal-d2, .pb-reveal-d2, .abt-reveal-d2, .aff-reveal-d2, .glm-reveal-d2, .ksk-reveal-d2, .scs-reveal-d2 { transition-delay: 200ms; }
.reveal-d3, .pb-reveal-d3, .abt-reveal-d3, .aff-reveal-d3, .glm-reveal-d3, .ksk-reveal-d3, .scs-reveal-d3 { transition-delay: 300ms; }
.reveal-d4, .pb-reveal-d4, .abt-reveal-d4, .aff-reveal-d4, .glm-reveal-d4, .ksk-reveal-d4, .scs-reveal-d4 { transition-delay: 400ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fade, .reveal, [class*="-fade"], [class*="-reveal"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ===== Container utility ============================================ */
.container,
.pb-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* ===== Section padding utilities =================================== */
.section { padding: var(--section-pad-lg) 0; }
.section-md { padding: var(--section-pad-md) 0; }
.section-sm { padding: var(--section-pad-sm) 0; }

/* ===== Button base (Stripe-grade) =================================== */
.btn,
.ak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap-min);
    padding: var(--s-3) var(--s-7);
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-normal);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                filter var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    user-select: none;
    white-space: nowrap;
}

.btn--primary,
.ak-btn--primary {
    background: var(--grad-cta);
    color: var(--c-text-inverse);
}

.btn--primary:hover,
.ak-btn--primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-accent);
}

.btn--outline,
.ak-btn--outline {
    background: transparent;
    color: var(--c-text);
    border: 1.5px solid var(--c-border-strong);
}

.btn--outline:hover,
.ak-btn--outline:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-bg);
}

.btn--ghost {
    background: transparent;
    color: var(--c-text-muted);
}

.btn--ghost:hover {
    color: var(--c-text);
    background: var(--c-bg-muted);
}

.btn--dark {
    background: var(--c-text);
    color: var(--c-text-inverse);
}

.btn--dark:hover {
    background: var(--c-text-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn--lg {
    min-height: 56px;
    padding: var(--s-4) var(--s-9);
    font-size: var(--fs-body);
    border-radius: var(--radius-lg);
}

.btn--sm {
    min-height: 36px;
    padding: var(--s-2) var(--s-5);
    font-size: var(--fs-meta);
}

.btn:disabled,
.ak-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== Card base ==================================================== */
.card,
.ak-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    padding: var(--s-7);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
}

.card--hover:hover,
.ak-card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-primary-soft);
}

/* ===== Badge ======================================================== */
.badge,
.ak-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1;
}

.badge--primary { background: var(--c-primary-bg); color: var(--c-primary); }
.badge--accent { background: var(--c-accent-bg); color: var(--c-accent); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }

/* ===== Eyebrow (small uppercase label above titles) ================= */
.eyebrow,
.ak-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: var(--s-3);
}

/* ===== Tap-target safety net ======================================== */
/* Any anchor or button with visible content should be ≥ 44×44 unless
   it's part of nav (already covered) or has explicit small-tap class. */
button:not(.btn--sm):not([class*="-arrow"]):not([class*="-thumb"]),
.btn:not(.btn--sm) {
    min-height: var(--tap-min);
}

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

/* ===== Section title block (reusable) =============================== */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-12);
}

.section-head--left {
    text-align: left;
    margin-left: 0;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    color: var(--c-text);
    margin: 0 0 var(--s-4);
}

.section-title em {
    font-style: normal;
    background: var(--grad-emphasis);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.section-sub {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--c-text-muted);
    margin: 0;
}

/* ===== CANONICAL MODAL MOTION — shared by legal/upgrade/payment/quick-register/
   command-palette etc. Backdrop fades, panel rises+settles. One definition so
   every dialog enters the same way; timing/easing live in --modal-dur/--modal-ease. */
@keyframes akModalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes akModalPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes akModalPanelIn { from { opacity: 0; } to { opacity: 1; } }
}