/* ============================================================
 * AURORA — ULTRAPREMIUM FOUNDATION LAYER
 *
 * Load order: style.css → premium-polish.css → THIS FILE → page styles.
 *
 * This sheet does NOT redesign anything. It adds the foundation that makes
 * every existing page feel premium across devices: motion respect, focus
 * visibility, tactile button feedback, refined scrollbars, brand selection,
 * touch-target minimums, and a unified design-token scale.
 *
 * Safe to load on every page; no page-specific selectors here.
 * ============================================================ */

:root {
    /* === SPACING SCALE === uniform 4pt grid */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    /* === RADIUS SCALE === replaces ad-hoc 4/7/8/9/10/12/14/16 */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* === MOTION === premium spring + expo curves */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft:   cubic-bezier(0.4, 0, 0.2, 1);

    --t-fast:   140ms;
    --t-base:   220ms;
    --t-slow:   340ms;

    /* === COLOR TOKENS === references the existing --primary mint */
    --ring-color: rgba(28, 191, 167, 0.45);
    --ring-color-strong: rgba(28, 191, 167, 0.7);
    --selection-bg: rgba(28, 191, 167, 0.22);
    --selection-fg: #07171a;

    /* === Z-INDEX SCALE === avoids the random 2/50/1000 spread */
    --z-base:     1;
    --z-overlay:  10;
    --z-sticky:   50;
    --z-nav:      100;
    --z-dropdown: 500;
    --z-modal:    1000;
    --z-toast:    1500;
    --z-tooltip:  2000;
}

/* ============================================================
 *  Brand-colored text selection (replaces default blue)
 * ============================================================ */
::selection      { background: var(--selection-bg); color: var(--selection-fg); }
::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ============================================================
 *  Premium scrollbar — slim, brand-tinted, non-intrusive
 *  Webkit + Firefox both covered.
 * ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 28, 36, 0.18) transparent;
}
*::-webkit-scrollbar       { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(15, 28, 36, 0.16);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color var(--t-base) var(--ease-out-soft);
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(28, 191, 167, 0.5);
    background-clip: content-box;
}

/* ============================================================
 *  Universal focus-visible ring
 *  Only shows for keyboard navigation (not mouse clicks). Brand-tinted.
 * ============================================================ */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--ring-color-strong);
    outline-offset: 2px;
    border-radius: inherit;
    transition: outline-offset var(--t-fast) var(--ease-out-soft);
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline-offset: 3px;
}
/* Inputs get a soft glow instead of an outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring-color);
}

/* ============================================================
 *  Universal tactile feedback for clickable elements
 *  Subtle 0.97 press on :active gives every button the same
 *  "I responded to your tap" feel without per-component CSS.
 * ============================================================ */
button:not(:disabled):active,
a.btn:active,
[role="button"]:not(:disabled):active,
.card-fab:not(:disabled):active,
.saved-action-btn:not(:disabled):active,
.edit-print-btn:not(:disabled):active,
.edit-brand-kit-cta:not(:disabled):active,
.contact-btn:not(:disabled):active,
.filter-chip:not(:disabled):active,
.step-tab:not(:disabled):active,
.results-action-btn:active,
.btn-saved-add:active,
.btn-saved-cta:active {
    transform: scale(0.97);
    transition: transform 60ms var(--ease-out-soft);
}

/* Cursor polish — every interactive thing gets a pointer */
button:not(:disabled),
[role="button"]:not(:disabled),
label[for],
summary {
    cursor: pointer;
}
button:disabled,
[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* ============================================================
 *  Touch device enhancements
 *  Bumps small (≤32px) tap targets to 40px minimum so fingers
 *  actually hit them. Targets the most common offenders without
 *  affecting their look on desktop.
 * ============================================================ */
@media (hover: none) and (pointer: coarse) {
    .saved-action-btn,
    .card-fab,
    .contact-modal-close,
    .saved-search i {
        min-width: 40px;
        min-height: 40px;
    }
    .saved-action-btn,
    .card-fab,
    .contact-modal-close {
        width: 40px;
        height: 40px;
    }

    /* Touch devices: more generous tap padding on chips/pills */
    .filter-chip,
    .step-tab,
    .kw-chip,
    .tld-pill {
        min-height: 36px;
    }
    .filter-chip { padding-top: 10px; padding-bottom: 10px; }
}

/* ============================================================
 *  Reduced motion — respect OS-level user preference.
 *  Strips all animations / transitions, keeps instant feedback.
 * ============================================================ */
@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;
    }
    /* Disable the universal active scale too */
    button:active,
    [role="button"]:active {
        transform: none !important;
    }
}

/* ============================================================
 *  Smooth scroll for in-page anchor jumps
 *  (respected by prefers-reduced-motion above)
 * ============================================================ */
html { scroll-behavior: smooth; }

/* ============================================================
 *  Form polish — autofill colour fix + consistent placeholder
 * ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #0F172A;
    transition: background-color 5000s ease-in-out 0s;
}
::placeholder {
    color: #cbd5e1;
    opacity: 1;
}

/* ============================================================
 *  Image loading polish — fades in instead of popping
 * ============================================================ */
img {
    -webkit-user-drag: none;
    user-select: none;
}
img[loading="lazy"] {
    opacity: 0;
    animation: imgFadeIn var(--t-slow) var(--ease-out-soft) forwards;
}
@keyframes imgFadeIn {
    to { opacity: 1; }
}

/* ============================================================
 *  Skeleton shimmer — drop-in class for loading placeholders
 *  Usage: <div class="skeleton" style="width: 100%; height: 200px;"></div>
 * ============================================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(15, 28, 36, 0.04) 0%,
        rgba(15, 28, 36, 0.08) 50%,
        rgba(15, 28, 36, 0.04) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--r-md);
    animation: skeletonShimmer 1.6s var(--ease-out-soft) infinite;
}
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================
 *  Modal focus-trap helper — applied via JS toggling on backdrops
 *  Prevents background from being tabbed into while modal is open.
 * ============================================================ */
body.modal-open {
    overflow: hidden;
}
body.modal-open > *:not([data-modal-open]) {
    /* Background content still visible but not tabbable */
}

/* ============================================================
 *  Responsive container — drop-in replacement for inconsistent
 *  container widths. Add class="container-app" to opt in.
 * ============================================================ */
.container-app {
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
    max-width: 1280px;
}
@media (min-width: 640px)  { .container-app { padding-inline: 24px; } }
@media (min-width: 1024px) { .container-app { padding-inline: 32px; max-width: 1440px; } }
@media (min-width: 1440px) { .container-app { max-width: 1680px; } }

/* ============================================================
 *  Premium link — subtle underline animation, brand-tinted
 *  Add class="link-premium" for the polish.
 * ============================================================ */
.link-premium {
    position: relative;
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--t-base) var(--ease-out-expo);
}
.link-premium:hover {
    background-size: 100% 1px;
}

/* ============================================================
 *  Print — clean output for any user-initiated browser-print
 * ============================================================ */
@media print {
    .card-floating-actions,
    .saved-card-actions,
    .nav-main,
    .results-actions,
    footer {
        display: none !important;
    }
}