/* =========================================================================
   TASTE SYSTEM — design tokens, motion, accessibility
   Anti-slop foundation: explicit tokens, spring easing, reduced-motion,
   one-radius scale, one-palette, no AI tells.
   ========================================================================= */

:root {
    /* ── Spacing scale (rem-based) ───────────────────────────────────── */
    --t-0: 0;
    --t-1: 0.25rem;     /* 4 */
    --t-2: 0.5rem;      /* 8 */
    --t-3: 0.75rem;     /* 12 */
    --t-4: 1rem;        /* 16 */
    --t-5: 1.25rem;     /* 20 */
    --t-6: 1.5rem;      /* 24 */
    --t-8: 2rem;        /* 32 */
    --t-10: 2.5rem;     /* 40 */
    --t-12: 3rem;       /* 48 */
    --t-16: 4rem;       /* 64 */
    --t-20: 5rem;       /* 80 */
    --t-24: 6rem;       /* 96 */
    --t-32: 8rem;       /* 128 */

    /* ── One radius scale (picked once, used everywhere) ────────────── */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-pill: 999px;

    /* ── Type scale (modular) ────────────────────────────────────────── */
    --t-xs: 0.75rem;     /* 12 */
    --t-sm: 0.875rem;    /* 14 */
    --t-base: 1rem;      /* 16 */
    --t-lg: 1.125rem;    /* 18 */
    --t-xl: 1.25rem;     /* 20 */
    --t-2xl: 1.5rem;     /* 24 */
    --t-3xl: 1.875rem;   /* 30 */
    --t-4xl: 2.25rem;    /* 36 */
    --t-5xl: 3rem;       /* 48 */
    --t-6xl: 3.75rem;    /* 60 */
    --t-7xl: 4.5rem;     /* 72 */

    /* ── Letter-spacing ─────────────────────────────────────────────── */
    --ls-tighter: -0.04em;
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;
    --ls-wider: 0.1em;

    /* ── Spring easings (Motion defaults) ───────────────────────────── */
    --ease-spring-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring-in: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

    /* ── Duration tokens ────────────────────────────────────────────── */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
    --dur-slower: 600ms;

    /* ── Shadow tokens (tinted to bg, never pure black) ─────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.15);

    /* ── Z-index scale ────────────────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;
}

/* =========================================================================
   GLOBAL MOTION SYSTEM
   Only transform + opacity. Respects reduced-motion.
   ========================================================================= */

/* Tactile press feedback */
button:active:not(:disabled),
[role="button"]:active {
    transform: translateY(1px) scale(0.98);
}



/* =========================================================================
   FOCUS STATES — accessibility
   ========================================================================= */

*:focus-visible {
    outline: 2px solid var(--primary, #10b981);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--primary, #10b981);
    outline-offset: 3px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--primary, #10b981);
    box-shadow: var(--shadow-focus);
}

/* =========================================================================
   SMOOTH SCROLL
   ========================================================================= */

html { scroll-behavior: smooth; }

/* =========================================================================
   SELECTION
   ========================================================================= */

::selection {
    background: rgba(16, 185, 129, 0.2);
    color: inherit;
}



/* =========================================================================
   REDUCED MOTION — mandatory
   ========================================================================= */

@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;
    }
    .btn-primary:hover, .pp-btn-primary:hover,
    .lp-card:hover, .pp-card:hover {
        transform: none !important;
    }
}