/* ── CollectiveCrop design tokens ──────────────────────────────────────────── */
/* Source of truth: docs/design-system.md                                      */

:root {
    /* Color */
    --cc-green-900: #1a3d1c;
    --cc-green-700: #2d5a30;
    --cc-green-500: #3d7a3f;
    --cc-green-50:  #f0fdf4;
    --cc-neutral-900: #111827;
    --cc-neutral-700: #374151;
    --cc-neutral-500: #6b7280;
    --cc-neutral-300: #d1d5db;
    --cc-neutral-100: #e5e7eb;
    --cc-neutral-50:  #f9fafb;

    /* Spacing */
    --cc-space-1:  0.25rem;
    --cc-space-2:  0.5rem;
    --cc-space-3:  0.75rem;
    --cc-space-4:  1rem;
    --cc-space-5:  1.25rem;
    --cc-space-6:  1.5rem;
    --cc-space-8:  2rem;
    --cc-space-10: 2.5rem;
    --cc-space-12: 3rem;
    --cc-space-16: 4rem;

    /* Radii */
    --cc-radius-sm: 0.375rem;
    --cc-radius-md: 0.5rem;
    --cc-radius-lg: 0.75rem;
    --cc-radius-xl: 1rem;

    /* Shadows */
    --cc-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --cc-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --cc-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
}

/* ── Empty state ───────────────────────────────────────────────────────────── */

.cc-empty-state {
    padding: var(--cc-space-12) var(--cc-space-6);
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}
.cc-empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--cc-space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-green-50);
    border-radius: 50%;
    color: var(--cc-green-500);
    font-size: 1.25rem;
}
.cc-empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cc-neutral-900);
    margin: 0 0 var(--cc-space-2);
}
.cc-empty-state-message {
    color: var(--cc-neutral-500);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 var(--cc-space-5);
}
.cc-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-2);
    padding: var(--cc-space-2) var(--cc-space-5);
    background: var(--cc-green-500);
    color: #fff;
    text-decoration: none;
    border-radius: var(--cc-radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s;
    min-height: 2.5rem;
}
.cc-empty-state-action:hover { background: var(--cc-green-700); }
.cc-empty-state-action:focus-visible {
    outline: 2px solid var(--cc-green-500);
    outline-offset: 2px;
}

/* ── State selector (compact, for nav) ─────────────────────────────────────── */

.cc-state-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-2);
    padding: var(--cc-space-2) var(--cc-space-3);
    background: var(--cc-neutral-50);
    border: 1px solid var(--cc-neutral-100);
    border-radius: var(--cc-radius-md);
    font-size: 0.8125rem;
    color: var(--cc-neutral-700);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    min-height: 2rem;
    line-height: 1;
}
.cc-state-selector:hover {
    background: #fff;
    border-color: var(--cc-neutral-300);
    color: var(--cc-neutral-900);
}
.cc-state-selector:focus-visible {
    outline: 2px solid var(--cc-green-500);
    outline-offset: 2px;
}
.cc-state-selector-icon { color: var(--cc-green-500); font-size: 0.75rem; }
.cc-state-selector-label { font-weight: 500; }
.cc-state-selector-state { color: var(--cc-neutral-900); font-weight: 600; }

/* Hide the verbose version on small screens; keep an icon-only variant */
@media (max-width: 767px) {
    .site-nav-state { display: none; }
}
@media (max-width: 480px) {
    .cc-state-selector-label { display: none; }
}

/* ── Marketplace teaser (inline on content pages) ──────────────────────────── */

.cc-marketplace-teaser {
    margin: var(--cc-space-12) auto;
    max-width: 720px;
    padding: var(--cc-space-6) var(--cc-space-8);
    background: linear-gradient(135deg, var(--cc-green-900) 0%, var(--cc-green-700) 100%);
    color: #fff;
    border-radius: var(--cc-radius-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cc-space-5);
    align-items: center;
}
.cc-marketplace-teaser-copy { min-width: 0; }
.cc-marketplace-teaser-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border-radius: 2rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: var(--cc-space-2);
    color: rgba(255,255,255,0.9);
}
.cc-marketplace-teaser-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--cc-space-1);
    line-height: 1.3;
}
.cc-marketplace-teaser-message {
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}
.cc-marketplace-teaser-cta {
    padding: var(--cc-space-3) var(--cc-space-5);
    background: #fff;
    color: var(--cc-green-900);
    border-radius: var(--cc-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: var(--cc-space-2);
    transition: transform 0.15s;
}
.cc-marketplace-teaser-cta:hover { transform: translateY(-1px); }
.cc-marketplace-teaser-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .cc-marketplace-teaser {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cc-marketplace-teaser-cta { justify-self: center; }
}

@media print {
    .cc-marketplace-teaser,
    .cc-state-selector { display: none !important; }
}