/* Spoot color system — verbatim from constants/theme.ts plus in-screen literals */
:root{
/* ── Core brand ───────────────────────────────────────────── */
--spoot-primary:#03271a;            /* deep bottle green — text, buttons, pins */
--spoot-primary-light:#164938;      /* splash background, brand fields */
--spoot-secondary:#ff751f;          /* Spoot orange — accents, ranks, CTAs */
--spoot-secondary-light:#ff8933;
--spoot-secondary-fixed:#ffe5d4;    /* orange tint surface */
--spoot-on-secondary-fixed:#ff751f;

/* ── Surfaces (warm cream ladder) ─────────────────────────── */
--spoot-surface:#fdf5ec;                     /* app background */
--spoot-surface-container-lowest:#fffcf8;    /* inputs, sheets */
--spoot-surface-container-low:#f0e0ca;
--spoot-surface-container:#ecddd0;
--spoot-surface-container-high:#e8d5c4;
--spoot-surface-container-highest:#e0ccbc;
--spoot-card-muted:#eae5de;                  /* default card fill */
--spoot-card-muted-dark:#d3cdc5;             /* tag chips */

/* ── Content ──────────────────────────────────────────────── */
--spoot-on-surface:#03271a;
--spoot-on-surface-variant:#1e3028;   /* secondary text */
--spoot-on-primary:#ffffff;
--spoot-on-secondary:#ffffff;
--spoot-outline-variant:rgba(3,39,26,0.15);

/* ── Taste & rating signals ───────────────────────────────── */
--spoot-taste-green:#5cb86b;              /* "Pasuje do gustu" pill / match ring */
--spoot-taste-green-90:rgba(92,184,107,0.9);
--spoot-taste-green-60:rgba(92,184,107,0.6);
--spoot-rated-surface:#eaf4ee;            /* card background once rated */
--spoot-rating-high:#2e7d32;              /* 8–10 */
--spoot-rating-mid:#d4892a;               /* 5–7 */
--spoot-rating-low:#ff751f;               /* 1–4 (brand orange) */
--spoot-star:#ffc107;                     /* star glyph on photo badges */
--spoot-banner-orange:#ff6b00;            /* taste-setup banner */
--spoot-sponsored-surface:#fff3e0;
--spoot-sponsored-text:#e65100;

/* ── Topic circles ────────────────────────────────────────── */
--spoot-topic-peach:#f2ddc4;
--spoot-topic-coral:#dd8a72;

/* ── Map (custom Google Maps style) ───────────────────────── */
--spoot-map-bg:#e8e0d0;
--spoot-map-road:#ffffff;
--spoot-map-road-minor:#f0ebe0;
--spoot-map-park:#c8e6c0;
--spoot-map-block:#d4ccbe;

/* ── Overlays & scrims ────────────────────────────────────── */
--spoot-scrim-modal:rgba(0,0,0,0.4);
--spoot-scrim-photo:rgba(0,0,0,0.55);
--spoot-scrim-card:rgba(0,0,0,0.38);
--spoot-scrim-guide:rgba(0,0,0,0.45);
--spoot-scrim-hero:rgba(3,39,26,0.45);
--spoot-scrim-badge:rgba(0,0,0,0.6);
--spoot-scrim-sponsored:rgba(30,30,30,0.75);
--spoot-on-scrim:#ffffff;
--spoot-on-scrim-muted:rgba(255,255,255,0.8);
--spoot-on-scrim-faint:rgba(255,255,255,0.7);

/* ── Semantic aliases (use these in new work) ─────────────── */
--text-heading:var(--spoot-on-surface);
--text-body:var(--spoot-on-surface-variant);
--text-inverse:var(--spoot-on-primary);
--text-accent:var(--spoot-secondary);
--surface-page:var(--spoot-surface);
--surface-card:var(--spoot-card-muted);
--surface-input:var(--spoot-surface-container-lowest);
--surface-sheet:var(--spoot-surface);
--surface-inverse:var(--spoot-primary);
--border-hairline:var(--spoot-outline-variant);
--action-primary:var(--spoot-primary);
--action-accent:var(--spoot-secondary);
--action-on-primary:var(--spoot-on-primary);
}