/* Eveno design tokens — the single source of truth for colour, type,
   spacing, radius, elevation, and motion across every surface.
   Surfaces alias their legacy variable names to these tokens; new CSS
   should use --ev-* directly. Calm, warm, premium UK night-out — not
   neon SaaS. */

:root {
    color-scheme: dark;

    /* Colour — warm charcoal night palette */
    --ev-bg: #0b0c0e;
    --ev-bg-deep: #07080a;
    --ev-surface: #14161a;
    --ev-surface-raised: #1b1e23;
    --ev-scrim: rgba(10, 12, 15, 0.88);
    --ev-scrim-strong: rgba(10, 12, 15, 0.96);
    --ev-ink: #f4f2ed;
    --ev-ink-inverse: #101114;
    --ev-muted: rgba(235, 232, 224, 0.66);
    --ev-muted-strong: rgba(235, 232, 224, 0.84);
    --ev-border: rgba(244, 242, 237, 0.14);
    --ev-border-strong: rgba(244, 242, 237, 0.28);

    /* Accents — used sparingly: highlights, ratings, live signals */
    --ev-accent: #e3a45c;
    --ev-accent-ink: #2b1f10;
    --ev-accent-soft: rgba(227, 164, 92, 0.16);
    --ev-positive: #7cd8a2;
    --ev-positive-soft: rgba(124, 216, 162, 0.14);
    --ev-danger: #e2635c;
    --ev-info: #5fa8ff;
    --ev-rating: #f2cc60;

    /* Type — system stack for speed; calm weights, tight tracking */
    --ev-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ev-text-xs: 11px;
    --ev-text-sm: 13px;
    --ev-text-md: 15px;
    --ev-text-lg: 17px;
    --ev-text-xl: 22px;
    --ev-text-2xl: 28px;
    --ev-text-display: clamp(30px, 6vw, 40px);
    --ev-weight-display: 700;
    --ev-tracking-tight: -0.022em;
    --ev-tracking-caps: 0.08em;

    /* Spacing — 8pt grid with a 4pt half-step */
    --ev-s1: 4px;
    --ev-s2: 8px;
    --ev-s3: 12px;
    --ev-s4: 16px;
    --ev-s5: 24px;
    --ev-s6: 32px;
    --ev-s7: 40px;
    --ev-s8: 48px;

    /* Radius */
    --ev-r-sm: 10px;
    --ev-r-md: 14px;
    --ev-r-lg: 20px;
    --ev-r-xl: 28px;
    --ev-r-pill: 999px;

    /* Elevation */
    --ev-e1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.22);
    --ev-e2: 0 8px 26px rgba(0, 0, 0, 0.38);
    --ev-e3: 0 18px 50px rgba(0, 0, 0, 0.5);

    /* Motion — 150–250ms, one easing curve */
    --ev-fast: 150ms;
    --ev-med: 200ms;
    --ev-slow: 250ms;
    --ev-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* Shared primitives available on every page that links this sheet. */

.ev-kicker {
    color: var(--ev-muted);
    font-size: var(--ev-text-xs);
    font-weight: 700;
    letter-spacing: var(--ev-tracking-caps);
    text-transform: uppercase;
}

.ev-chip {
    align-items: center;
    background: var(--ev-surface-raised);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-r-pill);
    color: var(--ev-muted-strong);
    display: inline-flex;
    font-size: var(--ev-text-sm);
    font-weight: 600;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
}

.ev-chip--positive {
    background: var(--ev-positive-soft);
    border-color: transparent;
    color: var(--ev-positive);
}

.ev-chip--accent {
    background: var(--ev-accent-soft);
    border-color: transparent;
    color: var(--ev-accent);
}

.ev-skeleton {
    animation: ev-skeleton-pulse 1.4s var(--ev-ease) infinite;
    background: linear-gradient(100deg,
        rgba(244, 242, 237, 0.05) 40%,
        rgba(244, 242, 237, 0.1) 50%,
        rgba(244, 242, 237, 0.05) 60%);
    background-size: 200% 100%;
    border-radius: var(--ev-r-sm);
}

@keyframes ev-skeleton-pulse {
    from { background-position: 120% 0; }
    to { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-skeleton { animation: none; }
}