/* ==========================================================================
   Jupiter AI — Global Design System
   Typography · Spacing · Color · Motion · Components
   ========================================================================== */

:root {
    /* ---- Colors ---- */
    --ds-navy: #081B3A;
    --ds-card: #10264E;
    --ds-accent: #FF6B1A;
    --ds-white: #FFFFFF;
    --ds-muted: #B8C2D6;
    --ds-text: #111827;
    --ds-text-muted: #6B7280;
    --ds-bg: #FFFFFF;
    --ds-bg-soft: #FAFBFD;
    --ds-border: rgba(255, 255, 255, 0.08);
    --ds-border-light: rgba(8, 27, 58, 0.08);

    /* Align legacy tokens */
    --navy: var(--ds-navy);
    --orange: var(--ds-accent);
    --dark: var(--ds-navy);
    --accent: var(--ds-accent);
    --white: var(--ds-white);

    /* ---- Typography (desktop targets via clamp — overridden in responsive.css) ---- */
    --ds-h1: clamp(2.625rem, 4vw + 1rem, 5rem);
    --ds-h2: clamp(1.875rem, 3vw + 0.75rem, 3.5rem);
    --ds-h3: clamp(1.375rem, 2vw + 0.5rem, 2rem);
    --ds-h4: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
    --ds-body-lg: clamp(1.0625rem, 0.5vw + 1rem, 1.125rem);
    --ds-body: 1rem;
    --ds-small: 1rem;
    --ds-label: 0.875rem;
    --ds-caption: 0.8125rem;
    --ds-btn: 1rem;

    --ds-h1-lh: 1.05;
    --ds-h2-lh: 1.08;
    --ds-h3-lh: 1.12;
    --ds-body-lh: 1.65;

    /* ---- Spacing ---- */
    --ds-section-py: clamp(3rem, 5.5vh, 4.5rem);
    --ds-section-py-sm: clamp(2.25rem, 4vh, 3.25rem);
    --ds-section-head-mb: clamp(1.5rem, 2.5vw, 2.25rem);
    --ds-container: min(1400px, 100% - clamp(2rem, 6vw, 5rem));
    --ds-card-pad: 2rem;
    --ds-gap-card: 2rem;
    --ds-gap-grid: 2.5rem;

    /* ---- Layout ---- */
    --max: 1400px;
    --ds-radius: 20px;
    --ds-radius-sm: 14px;
    --ds-radius-pill: 999px;

    /* ---- Motion ---- */
    --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ds-duration: 0.8s;
    --ds-duration-fast: 0.35s;
    --ds-reveal-y: 40px;
    --ds-reveal-scale: 0.96;

    /* ---- Shadows ---- */
    --ds-shadow-sm: 0 4px 24px rgba(8, 27, 58, 0.06);
    --ds-shadow-md: 0 12px 40px rgba(8, 27, 58, 0.1);
    --ds-shadow-lg: 0 24px 64px rgba(8, 27, 58, 0.14);
    --ds-shadow-accent: 0 8px 32px rgba(255, 107, 26, 0.28);

    /* Section rhythm override */
    --section-py-medium: var(--ds-section-py-sm);
    --section-py-large: var(--ds-section-py);
    --section-py-cta: var(--ds-section-py);
}

/* ---- Global typography utilities (opt-in) ---- */
.ds-h1 {
    font-family: var(--font-heading);
    font-size: var(--ds-h1);
    font-weight: 700;
    line-height: var(--ds-h1-lh);
    letter-spacing: var(--track-heading);
}

.ds-h2 {
    font-family: var(--font-heading);
    font-size: var(--ds-h2);
    font-weight: 700;
    line-height: var(--ds-h2-lh);
    letter-spacing: var(--track-heading);
}

.ds-h3 {
    font-family: var(--font-heading);
    font-size: var(--ds-h3);
    font-weight: 600;
    line-height: var(--ds-h3-lh);
}

.ds-h4 {
    font-family: var(--font-heading);
    font-size: var(--ds-h4);
    font-weight: 600;
    line-height: var(--ds-h3-lh);
}

.ds-body-lg {
    font-size: var(--ds-body-lg);
    line-height: var(--ds-body-lh);
}

.ds-body {
    font-size: var(--ds-body);
    line-height: var(--ds-body-lh);
}

.ds-label,
[class*="__label"]:not([class*="__label-field"]):not(.btn-premium__label) {
    font-family: var(--font-nav);
    font-size: var(--ds-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- Section spacing utility ---- */
.ds-section {
    padding-top: var(--ds-section-py);
    padding-bottom: var(--ds-section-py);
}

.ds-section--sm {
    padding-top: var(--ds-section-py-sm);
    padding-bottom: var(--ds-section-py-sm);
}

/* ---- Global card polish ---- */
[class*="__card"]:not([class*="float-card"]):not([class*="__card-title"]),
[class*="-card"]:not(.ft-social):not(.ct-form-card):not(.contact-office-card),
.svc-arch-card,
.car-job-card,
.ct-why-card,
.ct-office-card,
.ct-process__card,
.abt-values__node,
.case-showcase__panel {
    transition:
        transform var(--ds-duration-fast) var(--ds-ease),
        box-shadow var(--ds-duration-fast) var(--ds-ease),
        border-color var(--ds-duration-fast) ease;
}

@media (hover: hover) {
    [class*="__card"]:not([class*="float-card"]):hover,
    [class*="-card"]:not(.ft-social):not(.ct-form-card):hover,
    .svc-arch-card:hover,
    .car-job-card:hover,
    .ct-why-card:hover,
    .ct-office-card:hover,
    .ct-process__card:hover {
        transform: translateY(-8px);
    }
}

/* ---- Global link underline ---- */
.ds-link,
.ft-links a,
[class*="__links"] a:not(.ft-social):not(.ct-office-card__directions) {
    background-image: linear-gradient(var(--ds-accent), var(--ds-accent));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: color 0.25s ease, background-size 0.3s var(--ds-ease);
}

.ds-link:hover,
.ds-link:focus-visible {
    background-size: 100% 1px;
}

/* ---- Scroll reveal (global) ---- */
[data-ds-reveal],
.js-motion [data-abt-animate]:not(.is-visible),
.js-motion [data-svc-animate]:not(.is-visible),
.js-motion [data-car-animate]:not(.is-visible),
.js-motion [data-cs-animate]:not(.is-visible),
.js-motion [data-ct-animate]:not(.is-visible),
.js-motion [data-footer-animate]:not(.is-visible),
.js-motion [data-cta-animate]:not(.is-visible) {
    opacity: 0;
    transform: translateY(var(--ds-reveal-y));
    transition:
        opacity var(--ds-duration) var(--ds-ease),
        transform var(--ds-duration) var(--ds-ease);
    transition-delay: var(--ds-reveal-delay, 0ms);
}

[data-ds-reveal].is-visible,
[data-ds-reveal].is-inview,
[data-abt-animate].is-visible,
[data-svc-animate].is-visible,
[data-car-animate].is-visible,
[data-cs-animate].is-visible,
[data-ct-animate].is-visible,
[data-footer-animate].is-visible,
[data-cta-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-ds-reveal="scale"],
.js-motion [data-ds-reveal-scale]:not(.is-visible) {
    transform: translateY(var(--ds-reveal-y)) scale(var(--ds-reveal-scale));
}

[data-ds-reveal="scale"].is-visible,
[data-ds-reveal-scale].is-visible {
    transform: translateY(0) scale(1);
}

/* ---- Image hover zoom ---- */
figure[class*="__photo"] img,
figure[class*="__visual"] img,
figure[class*="__frame"] img,
figure[class*="__media"] img,
[class*="__image"] img,
.reveal-image img,
.reveal-image picture,
.reveal-image .photo-crop {
    transition: transform 0.55s var(--ds-ease);
}

figure[class*="__photo"]:hover img,
figure[class*="__visual"]:hover img,
figure[class*="__frame"]:hover img,
figure[class*="__media"]:hover img,
[class*="__image"]:hover img {
    transform: scale(1.05);
}

/* ---- Form polish ---- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: rgba(255, 107, 26, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.12);
}

/* ---- Page enter ---- */
@keyframes ds-page-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.is-page-entering #main-content {
    animation: ds-page-enter 0.3s var(--ds-ease) both;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration: 0.01ms;
        --ds-duration-fast: 0.01ms;
        --ds-reveal-y: 0;
        --ds-reveal-scale: 1;
    }

    [data-ds-reveal],
    [data-abt-animate],
    [data-svc-animate],
    [data-car-animate],
    [data-cs-animate],
    [data-ct-animate],
    [data-footer-animate],
    [data-cta-animate],
    .reveal-up,
    .reveal-fade,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body.is-page-entering #main-content {
        animation: none;
    }

    [class*="__card"]:hover,
    [class*="-card"]:hover {
        transform: none !important;
    }

    figure[class*="__photo"]:hover img,
    figure[class*="__visual"]:hover img {
        transform: none !important;
    }
}

@keyframes ds-form-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.contact-form.is-shake,
.ct-form.is-shake,
.car-form.is-shake,
.svc-staff-form.is-shake {
    animation: ds-form-shake 0.45s ease;
}