/* Scentswap design system — tokens + shared primitives (no framework rebuild). */

:root {
    /* Brand purple scale */
    --ss-plum-50: #f7f3fb;
    --ss-plum-100: #eee6f6;
    --ss-plum-200: #d9c8eb;
    --ss-plum-300: #b896d6;
    --ss-plum-400: #9563bb;
    --ss-plum-500: #7a429f;
    --ss-plum-600: #5c2a88;
    --ss-plum-700: #48216b;
    --ss-plum-800: #351850;
    --ss-plum-900: #241036;
    --ss-plum-950: #160a22;

    /* Neutrals */
    --ss-gray-50: #f8f7f9;
    --ss-gray-100: #efedf2;
    --ss-gray-200: #ddd8e4;
    --ss-gray-300: #c4bdc9;
    --ss-gray-400: #9a92a6;
    --ss-gray-500: #6f677a;
    --ss-gray-600: #544d5e;
    --ss-gray-700: #3d3748;
    --ss-gray-800: #2a2533;
    --ss-gray-900: #1a1620;

    /* Semantic */
    --ss-success: #1f7a4d;
    --ss-success-bg: #e8f6ef;
    --ss-warning: #9a6700;
    --ss-warning-bg: #fff6e0;
    --ss-error: #b42318;
    --ss-error-bg: #fef3f2;
    --ss-info: #175cd3;
    --ss-info-bg: #eff4ff;

    /* Surfaces */
    --ss-bg: #fbfaf8;
    --ss-bg-elevated: #ffffff;
    --ss-fg: var(--ss-gray-900);
    --ss-muted: var(--ss-gray-500);
    --ss-border: var(--ss-gray-200);
    --ss-accent: var(--ss-plum-600);
    --ss-accent-hover: var(--ss-plum-700);
    --ss-accent-soft: var(--ss-plum-50);
    --ss-ring: rgba(92, 42, 136, 0.28);
    --ss-lagoon: #0f766e;
    --ss-lagoon-soft: #ecfdf8;

    /* Typography */
    --ss-font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --ss-font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --ss-text-xs: 0.75rem;
    --ss-text-sm: 0.875rem;
    --ss-text-base: 1rem;
    --ss-text-lg: 1.125rem;
    --ss-text-xl: 1.25rem;
    --ss-text-2xl: 1.5rem;
    --ss-text-3xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    --ss-text-4xl: clamp(2rem, 1.3rem + 2.4vw, 3rem);
    --ss-leading-tight: 1.15;
    --ss-leading-snug: 1.35;
    --ss-leading-normal: 1.55;
    --ss-measure: 70ch;

    /* Spacing (4/8 grid) */
    --ss-1: 0.25rem;
    --ss-2: 0.5rem;
    --ss-3: 0.75rem;
    --ss-4: 1rem;
    --ss-5: 1.25rem;
    --ss-6: 1.5rem;
    --ss-8: 2rem;
    --ss-10: 2.5rem;
    --ss-12: 3rem;
    --ss-16: 4rem;
    --ss-space: 8px;
    --ss-gutter: 16px;
    --ss-section-pad: 40px;
    --ss-max: 1400px;
    --ss-touch: 44px;

    /* Radius / elevation */
    --ss-radius-sm: 0.5rem;
    --ss-radius: 0.875rem;
    --ss-radius-lg: 1.25rem;
    --ss-radius-xl: 1.5rem;
    --ss-radius-full: 999px;
    --ss-shadow-sm: 0 1px 2px rgba(22, 10, 34, 0.06);
    --ss-shadow-md: 0 6px 20px rgba(22, 10, 34, 0.08);
    --ss-shadow-lg: 0 16px 40px rgba(22, 10, 34, 0.12);
    --ss-shadow-lift: 0 10px 28px rgba(92, 42, 136, 0.14);

    /* Motion */
    --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ss-dur: 180ms;
    --ss-dur-fast: 140ms;
    --ss-dur-slow: 240ms;
}

@media (min-width: 768px) {
    :root {
        --ss-gutter: 24px;
        --ss-section-pad: 56px;
    }
}

@media (min-width: 1200px) {
    :root {
        --ss-section-pad: 72px;
    }
}

html.dark,
[data-theme="dark"] {
    --ss-bg: #100e14;
    --ss-bg-elevated: #1a1620;
    --ss-fg: #f4f0f8;
    --ss-muted: #a79eb3;
    --ss-border: #322a3d;
    --ss-accent: #b896d6;
    --ss-accent-hover: #d9c8eb;
    --ss-accent-soft: #241036;
    --ss-ring: rgba(184, 150, 214, 0.35);
    --ss-gray-50: #1a1620;
    --ss-gray-100: #221c2c;
    --ss-gray-200: #322a3d;
    --ss-gray-500: #a79eb3;
    --ss-gray-700: #d5cde0;
    --ss-gray-900: #f4f0f8;
    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ss-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ss-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

@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;
    }
}

/* —— Layout —— */
.ss-container {
    width: min(100% - (var(--ss-gutter) * 2), var(--ss-max));
    margin-inline: auto;
}

.ss-section {
    padding-block: var(--ss-section-pad);
}

.ss-display {
    font-family: var(--ss-font-serif);
    font-size: var(--ss-text-4xl);
    line-height: var(--ss-leading-tight);
    letter-spacing: -0.02em;
    color: var(--ss-fg);
}

.ss-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ss-accent);
}

.ss-muted {
    color: var(--ss-muted);
}

.ss-prose-measure {
    max-width: var(--ss-measure);
}

.ss-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* —— Buttons —— */
.ss-btn-primary,
.ss-btn-secondary,
.ss-btn-ghost,
.ss-btn-teal,
.ss-btn-accent,
a.ss-btn-primary,
a.ss-btn-secondary,
a.ss-btn-ghost,
a.ss-btn-teal,
a.ss-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--ss-touch);
    padding: 0 1.15rem;
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-sm);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        color var(--ss-dur) var(--ss-ease),
        background-color var(--ss-dur) var(--ss-ease),
        border-color var(--ss-dur) var(--ss-ease),
        box-shadow var(--ss-dur) var(--ss-ease),
        transform var(--ss-dur) var(--ss-ease);
}

.ss-btn-primary,
a.ss-btn-primary {
    background: var(--ss-accent);
    color: #fff;
}

.ss-btn-primary:hover,
a.ss-btn-primary:hover {
    background: var(--ss-accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--ss-shadow-lift);
}

.ss-btn-secondary,
a.ss-btn-secondary {
    background: var(--ss-bg-elevated);
    color: var(--ss-accent);
    border-color: var(--ss-plum-200);
}

.ss-btn-secondary:hover,
a.ss-btn-secondary:hover {
    background: var(--ss-accent-soft);
    border-color: var(--ss-plum-300);
}

.ss-btn-ghost,
a.ss-btn-ghost {
    background: transparent;
    color: var(--ss-accent);
}

.ss-btn-ghost:hover,
a.ss-btn-ghost:hover {
    background: var(--ss-accent-soft);
}

.ss-btn-teal,
a.ss-btn-teal {
    background: var(--ss-lagoon);
    color: #fff;
}

.ss-btn-teal:hover,
a.ss-btn-teal:hover {
    filter: brightness(0.94);
    color: #fff;
}

.ss-btn-primary:disabled,
.ss-btn-secondary:disabled,
.ss-btn-ghost:disabled,
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* —— Forms —— */
.ss-input,
input.ss-input,
select.ss-input,
textarea.ss-input,
.ss-field input,
.ss-field select,
.ss-field textarea {
    width: 100%;
    min-height: var(--ss-touch);
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    background: var(--ss-bg-elevated);
    color: var(--ss-fg);
    font-size: 16px;
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
}

/* Must win over .ss-input padding shorthand (this file loads after the Vite build). */
.ss-input.ss-input-with-icon,
input.ss-input.ss-input-with-icon {
    padding-left: 2.75rem;
}

.ss-search-input[type='search']::-webkit-search-decoration,
.ss-search-input[type='search']::-webkit-search-cancel-button,
.ss-search-input[type='search']::-webkit-search-results-button,
.ss-search-input[type='search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.ss-input:focus,
input.ss-input:focus,
select.ss-input:focus,
textarea.ss-input:focus {
    outline: none;
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 4px var(--ss-ring);
}

/* —— Surfaces —— */
.ss-card {
    background: var(--ss-bg-elevated);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-sm);
}

.ss-card-lift {
    transition:
        transform var(--ss-dur) var(--ss-ease),
        box-shadow var(--ss-dur) var(--ss-ease),
        border-color var(--ss-dur) var(--ss-ease);
}

.ss-card-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--ss-shadow-md);
    border-color: color-mix(in srgb, var(--ss-accent) 28%, var(--ss-border));
}

.ss-badge,
.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--ss-radius-full);
    font-size: var(--ss-text-xs);
    font-weight: 650;
    background: var(--ss-accent-soft);
    color: var(--ss-accent);
}

.ss-chip-action {
    min-height: var(--ss-touch);
    padding-inline: 0.85rem;
    border: 1px solid var(--ss-border);
    background: var(--ss-bg-elevated);
    color: var(--ss-fg);
    text-decoration: none;
}

.ss-chip-action:hover,
.ss-chip-action[aria-current="true"],
.price-hit[aria-current="true"] {
    border-color: var(--ss-accent);
    background: var(--ss-accent-soft);
    color: var(--ss-accent);
}

/* Segmented controls (ml / concentration) */
.ss-segmented-track,
.price-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ss-segmented-btn,
.price-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ss-touch);
    padding: 0 0.95rem;
    border-radius: var(--ss-radius-full);
    border: 1px solid var(--ss-border);
    background: var(--ss-bg-elevated);
    color: var(--ss-fg);
    font-size: var(--ss-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ss-dur-fast) var(--ss-ease), border-color var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
}

.ss-segmented-btn.is-selected,
.ss-segmented-btn[aria-pressed="true"],
.price-hit[aria-current="true"] {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: #fff;
}

/* —— Skeleton / empty —— */
.ss-skeleton {
    display: block;
    border-radius: var(--ss-radius);
    background: linear-gradient(90deg, var(--ss-gray-100), var(--ss-gray-50), var(--ss-gray-100));
    background-size: 200% 100%;
    animation: ss-shimmer 1.2s ease-in-out infinite;
}

@keyframes ss-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.ss-empty {
    text-align: center;
    padding: var(--ss-8) var(--ss-4);
}

/* —— Focus / a11y —— */
:focus-visible {
    outline: 2px solid var(--ss-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ss-ring);
}

.ss-skip:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 100;
}

/* —— Header / footer polish —— */
.ss-header {
    background: color-mix(in srgb, var(--ss-bg-elevated) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ss-border) 80%, transparent);
    backdrop-filter: blur(12px);
    transition: box-shadow var(--ss-dur) var(--ss-ease);
}

.ss-header.is-scrolled {
    box-shadow: var(--ss-shadow-sm);
}

.ss-header-search-trigger {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    width: 100%;
    max-width: 18rem;
    min-width: 0;
    padding: 0 1rem;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-full);
    background: var(--ss-accent-soft);
    color: var(--ss-muted);
    font-size: var(--ss-text-sm);
    text-align: left;
    transition: border-color var(--ss-dur-fast) var(--ss-ease), background-color var(--ss-dur-fast) var(--ss-ease);
}

.ss-header-search-trigger:hover {
    border-color: var(--ss-plum-300);
    background: var(--ss-bg-elevated);
    color: var(--ss-fg);
}

.ss-kbd-hint {
    font-family: var(--ss-font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ss-plum-700);
    background: var(--ss-bg-elevated);
    border: 1px solid var(--ss-border);
    border-radius: 0.375rem;
    padding: 0.1rem 0.4rem;
}

.ss-site-footer {
    background: var(--ss-plum-950);
    color: var(--ss-plum-100);
}

.ss-footer-grid {
    display: grid;
    gap: var(--ss-6);
}

@media (min-width: 640px) {
    .ss-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ss-footer-grid {
        grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
        gap: var(--ss-8);
    }

    .ss-footer-group > summary {
        pointer-events: none;
        list-style: none;
    }

    .ss-footer-group > summary::-webkit-details-marker {
        display: none;
    }

    .ss-footer-group[open] ul,
    .ss-footer-group ul {
        display: block !important;
    }
}

.ss-footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: var(--ss-4);
}

.ss-footer-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ss-text-xs);
    color: var(--ss-plum-200);
}

/* —— Page surfaces —— */
.price-card,
.guide-card,
.ss-listing-card {
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
}

.price-card .price-amount {
    font-size: var(--ss-text-xl);
    font-weight: 700;
    color: var(--ss-accent);
}

.price-item-hero {
    gap: var(--ss-6);
}

.price-size-card.is-best {
    border-color: var(--ss-accent);
    box-shadow: var(--ss-shadow-md);
}

.price-fragrantica {
    color: var(--ss-accent);
    border-bottom-color: color-mix(in srgb, var(--ss-accent) 40%, transparent);
}

.guide-article {
    max-width: var(--ss-measure);
}

.guide-progress {
    position: fixed;
    inset: auto 0 auto 0;
    top: 0;
    height: 3px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
}

.guide-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ss-accent);
    transition: width 80ms linear;
}

/* Auth / legal consistency */
.ss-auth-shell,
.ss-legal-shell {
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--ss-plum-200) 55%, transparent), transparent 42%),
        radial-gradient(circle at 88% 0%, color-mix(in srgb, #f6e7c4 45%, transparent), transparent 36%),
        var(--ss-bg);
}

/* Image stability */
.ss-media,
.price-card img,
.home-hero-visual img,
.ss-listing-photo {
    aspect-ratio: attr(width) / attr(height);
    background: var(--ss-gray-50);
}

img[loading="lazy"] {
    content-visibility: auto;
}

/* Marketplace fill indicator */
.ss-fill-meter {
    margin-top: 0.45rem;
    height: 0.35rem;
    border-radius: var(--ss-radius-full);
    background: var(--ss-gray-100);
    overflow: hidden;
}

.ss-fill-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ss-plum-400), var(--ss-plum-600));
}

/* Sticky mobile filter bar */
.ss-filter-bar-mobile {
    position: sticky;
    bottom: 4.5rem;
    z-index: 30;
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-full);
    background: color-mix(in srgb, var(--ss-bg-elevated) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--ss-shadow-md);
}

@media (min-width: 1024px) {
    .ss-filter-bar-mobile {
        display: none;
    }
}