@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");

:root {
    --ds-primary: #171311;
    --ds-primary-soft: #2a221c;
    --ds-secondary: #c4a15f;
    --ds-secondary-strong: #8d6831;
    --ds-accent: #d8bb87;
    --ds-accent-soft: #f3e0c2;
    --ds-surface: #fffaf3;
    --ds-surface-strong: #f7efe2;
    --ds-surface-muted: #f3ebde;
    --ds-surface-dark: #171311;
    --ds-text: #1d1814;
    --ds-text-soft: #62594f;
    --ds-text-muted: #7f766d;
    --ds-success: #2e6b3f;
    --ds-warning: #a9731f;
    --ds-danger: #a6453c;
    --ds-info: #2b628d;
    --ds-line: rgba(23, 19, 17, 0.12);
    --ds-line-strong: rgba(196, 161, 95, 0.3);
    --ds-font-display: "Georgia", "Times New Roman", serif;
    --ds-font-body: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
    --ds-radius-sm: 0.75rem;
    --ds-radius-md: 1rem;
    --ds-radius-lg: 1.4rem;
    --ds-radius-xl: 1.8rem;
    --ds-radius-pill: 999px;
    --ds-shadow-sm: 0 8px 24px rgba(23, 19, 17, 0.08);
    --ds-shadow-md: 0 16px 38px rgba(23, 19, 17, 0.12);
    --ds-shadow-lg: 0 24px 54px rgba(23, 19, 17, 0.16);
    --ds-shadow-xl: 0 30px 70px rgba(23, 19, 17, 0.2);
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;
    --ds-space-7: 2rem;
    --ds-space-8: 2.5rem;
    --ds-space-9: 3rem;
    --ds-space-10: 4rem;
    --ds-transition: 220ms ease;
}

body {
    font-family: var(--ds-font-body);
    color: var(--ds-text);
    background: linear-gradient(180deg, #fcf6eb 0%, #f2eada 100%);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ds-font-display);
    letter-spacing: 0.01em;
    color: var(--ds-primary);
}

p {
    color: var(--ds-text-soft);
}

a {
    color: inherit;
    transition: color var(--ds-transition), opacity var(--ds-transition);
}

a:hover {
    color: var(--ds-secondary-strong);
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible {
    outline: 3px solid rgba(196, 161, 95, 0.28);
    outline-offset: 2px;
}

/* Typography */
.ds-display,
.ds-heading-1,
.ds-heading-2,
.ds-heading-3 {
    font-family: var(--ds-font-display);
}

.ds-heading-1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.02;
}

.ds-heading-2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.15;
}

.ds-heading-3 {
    font-size: 1.2rem;
    line-height: 1.3;
}

.ds-text-muted {
    color: var(--ds-text-muted);
}

.ds-text-strong {
    color: var(--ds-primary);
}

.ds-eyebrow,
.eyebrow {
    display: inline-block;
    margin-bottom: 0.8rem;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ds-secondary-strong);
}

/* Color palette utilities */
.ds-surface {
    background: var(--ds-surface);
}

.ds-surface-elevated {
    background: var(--ds-surface-strong);
}

.ds-surface-muted {
    background: var(--ds-surface-muted);
}

.ds-surface-dark {
    background: var(--ds-surface-dark);
    color: #fff;
}

.ds-accent {
    color: var(--ds-secondary-strong);
}

/* Buttons */
.btn {
    border-radius: var(--ds-radius-pill);
    border: 1px solid transparent;
    padding: 0.9rem 1.25rem;
    font-weight: 700;
    transition: transform var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition), color var(--ds-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(196, 161, 95, 0.22);
}

.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, var(--ds-secondary) 0%, var(--ds-accent) 100%);
    color: var(--ds-primary);
    box-shadow: var(--ds-shadow-sm);
}

.btn-secondary,
.btn.btn-secondary {
    background: rgba(23, 19, 17, 0.06);
    color: var(--ds-primary);
    border-color: rgba(23, 19, 17, 0.12);
}

.btn-quiet,
.btn.btn-quiet {
    background: transparent;
    color: var(--ds-secondary-strong);
    border-color: transparent;
    box-shadow: none;
    padding-inline: 0.5rem;
}

.btn-link,
.btn.btn-link {
    background: transparent;
    border: 0;
    color: var(--ds-secondary-strong);
    box-shadow: none;
    padding-inline: 0;
}

/* Cards */
.product-card,
.wishlist-card,
.trust-card,
.detail-card,
.marketplace-card,
.summary-card,
.stat-card,
.table-card,
.filter-panel,
.empty-state,
.review-summary-card,
.auth-card,
.footer-brand-card,
.footer-newsletter-card,
.tracking-card,
.ds-card {
    background: rgba(255, 250, 242, 0.96);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-sm);
}

.ds-card-elevated {
    box-shadow: var(--ds-shadow-md);
}

.ds-card-glass {
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(245, 235, 217, 0.95));
    backdrop-filter: blur(16px);
}

/* Inputs and forms */
input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-md);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ds-text);
    padding: 0.9rem 1rem;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(196, 161, 95, 0.55);
    box-shadow: 0 0 0 4px rgba(196, 161, 95, 0.14);
    background: #fff;
}

.form-grid,
.ds-form-grid {
    display: grid;
    gap: 1rem;
}

.ds-form-group {
    display: grid;
    gap: 0.45rem;
}

.ds-label,
label {
    font-weight: 700;
    color: var(--ds-primary);
}

/* Badges and labels */
.badge-success,
.badge-danger,
.badge-warning,
.badge-muted,
.mini-badge,
.source-badge,
.tag-chip,
.filter-chip,
.verified-badge,
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--ds-radius-pill);
    padding: 0.42rem 0.78rem;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-success,
.ds-badge-success {
    background: rgba(46, 107, 63, 0.12);
    color: var(--ds-success);
}

.badge-danger,
.ds-badge-danger {
    background: rgba(166, 69, 60, 0.14);
    color: var(--ds-danger);
}

.badge-warning,
.ds-badge-warning {
    background: rgba(169, 115, 31, 0.14);
    color: var(--ds-warning);
}

.badge-muted,
.ds-badge-muted {
    background: rgba(23, 19, 17, 0.07);
    color: var(--ds-text-soft);
}

.mini-badge,
.source-badge,
.tag-chip,
.filter-chip,
.verified-badge,
.ds-badge-primary {
    background: rgba(196, 161, 95, 0.16);
    color: var(--ds-secondary-strong);
}

/* Icons */
.ds-icon,
.feature-icon,
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 161, 95, 0.16);
    color: var(--ds-secondary-strong);
}

.ds-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1rem;
}

.feature-icon {
    width: 1.3rem;
    height: 1.3rem;
    font-size: 0.8rem;
}

.social-link {
    width: 2.7rem;
    height: 2.7rem;
    font-weight: 700;
}

/* Spacing utilities */
.ds-p-1 { padding: var(--ds-space-1); }
.ds-p-2 { padding: var(--ds-space-2); }
.ds-p-3 { padding: var(--ds-space-3); }
.ds-p-4 { padding: var(--ds-space-4); }
.ds-p-5 { padding: var(--ds-space-5); }
.ds-p-6 { padding: var(--ds-space-6); }
.ds-p-7 { padding: var(--ds-space-7); }
.ds-p-8 { padding: var(--ds-space-8); }
.ds-p-9 { padding: var(--ds-space-9); }
.ds-p-10 { padding: var(--ds-space-10); }

.ds-m-1 { margin: var(--ds-space-1); }
.ds-m-2 { margin: var(--ds-space-2); }
.ds-m-3 { margin: var(--ds-space-3); }
.ds-m-4 { margin: var(--ds-space-4); }
.ds-m-5 { margin: var(--ds-space-5); }
.ds-m-6 { margin: var(--ds-space-6); }
.ds-m-7 { margin: var(--ds-space-7); }
.ds-m-8 { margin: var(--ds-space-8); }
.ds-m-9 { margin: var(--ds-space-9); }
.ds-m-10 { margin: var(--ds-space-10); }

.ds-gap-1 { gap: var(--ds-space-1); }
.ds-gap-2 { gap: var(--ds-space-2); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-5 { gap: var(--ds-space-5); }
.ds-gap-6 { gap: var(--ds-space-6); }
.ds-gap-7 { gap: var(--ds-space-7); }

/* Radius helpers */
.ds-radius-sm { border-radius: var(--ds-radius-sm); }
.ds-radius-md { border-radius: var(--ds-radius-md); }
.ds-radius-lg { border-radius: var(--ds-radius-lg); }
.ds-radius-xl { border-radius: var(--ds-radius-xl); }
.ds-radius-pill { border-radius: var(--ds-radius-pill); }

/* Shadow helpers */
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
.ds-shadow-xl { box-shadow: var(--ds-shadow-xl); }

/* Animation helpers */
.ds-animate-hover {
    transition: transform var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-animate-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-md);
}

.ds-animate-fade {
    animation: dsFade 420ms ease both;
}

@keyframes dsFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ds-animate-pulse {
    animation: dsPulse 2.8s ease-in-out infinite;
}

@keyframes dsPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Component polish */
.site-header {
    border-bottom: 1px solid rgba(23, 19, 17, 0.08);
}

.hero-copy,
.hero-card,
.site-footer,
.filter-panel,
.summary-card,
.auth-card,
.tracking-card {
    box-shadow: var(--ds-shadow-md);
}

.product-card:hover,
.marketplace-card:hover,
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-md);
}

.site-search input,
.site-search button {
    border-radius: var(--ds-radius-pill);
}

.quick-view-modal__dialog,
.lightbox__dialog {
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-xl);
}

@media (max-width: 767.98px) {
    .btn {
        width: 100%;
    }

    .product-card__actions {
        grid-template-columns: 1fr;
    }
}