/* =========================================================
   DBLD Projects — Design Tokens
   Single source of truth for color, type, spacing, radius.
   Warm, clean, editorial — tan/cream surfaces, bold black type,
   flat pastel accents. No neon, no gloss, no theater-at-night.
   ========================================================= */

:root {
  /* ---- Color: base surfaces ---- */
  --color-bg: #ECE3D2;              /* warm tan — main page background */
  --color-bg-alt: #F5EFE2;          /* slightly lighter tan, for alternating sections */
  --color-surface: #FBF8F1;         /* card / panel background (near-white, warm) */
  --color-surface-2: #F2EAD8;       /* nested / secondary surface */
  --color-border: #DCD0B8;          /* soft warm border */
  --color-border-soft: #E6DCC7;

  /* ---- Color: text ---- */
  --color-text: #1A1712;            /* near-black — primary text */
  --color-text-dim: #5B5548;        /* secondary text */
  --color-text-faint: #8C8474;      /* tertiary / meta text */

  /* ---- Color: dark bar (header/footer) ---- */
  --color-dark: #17150F;
  --color-dark-text: #F5F0E3;
  --color-dark-text-dim: #B8AF9C;
  --color-dark-border: #2C2A21;

  /* ---- Color: accents (flat pastels, no gradients) ---- */
  --color-accent: #A9C08D;          /* sage — primary actions */
  --color-accent-ink: #17200F;      /* text on sage */
  --color-accent-2: #E3CE7E;        /* butter — secondary actions / highlights */
  --color-accent-2-ink: #241D06;    /* text on butter */
  --color-accent-3: #C98F6B;        /* muted terracotta — tertiary tag color */
  --color-velvet: #B4573F;          /* used sparingly — destructive / bold emphasis only */

  /* ---- Color: status badges (flat) ---- */
  --status-live-bg: #DCEBD1;
  --status-live-text: #2F6B39;
  --status-coming-bg: #F1E7C0;
  --status-coming-text: #7A5E17;
  --status-closed-bg: #E7E2D6;
  --status-closed-text: #6B6558;
  --status-results-bg: #E1DCEF;
  --status-results-text: #52449C;

  /* ---- Type ---- */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale ----
     Headings use clamp(min, preferred, max) so they shrink with the screen
     instead of staying at desktop size. That fixed the "zoomed in on iPhone"
     problem: a 48px h1 on a 390px-wide phone eats a third of the screen, and
     because everything below it was sized the same on every device, the whole
     page read as though it had been magnified.

     Read clamp as: never smaller than the first number, never bigger than the
     last, and in between it scales with the viewport width (vw). */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.15rem, 3.4vw, 1.375rem);
  --fs-xl: clamp(1.3rem, 4.6vw, 1.75rem);
  --fs-2xl: clamp(1.65rem, 6.2vw, 2.25rem);
  --fs-3xl: clamp(2rem, 8.4vw, 3rem);
  --fs-4xl: clamp(2.5rem, 11vw, 4rem);

  /* ---- Spacing (4px scale) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* ---- Radius / shape ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --stub-notch: 14px;

  /* ---- Shadow ---- */
  --shadow-card: 0 2px 10px rgba(23, 21, 15, 0.08);
  --shadow-card-hover: 0 10px 26px rgba(23, 21, 15, 0.16);
  --shadow-card-lift: 0 16px 34px rgba(23, 21, 15, 0.2);

  /* ---- Gloss ----
     A single light sheen laid over a colored surface. Used on the tiles you
     tap so they read as raised objects rather than flat blocks. Kept as one
     token so the whole site's gloss can be dialled up or off in one place. */
  --sheen: linear-gradient(160deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0) 70%);

  /* ---- Layout ---- */
  --content-max: 960px;
  --nav-height: 68px;
}

/* Tighten the page gutters on small screens — 16px each side was eating real
   width on a phone, which added to the cramped feeling. */
@media (max-width: 480px) {
  :root {
    --sp-7: 2.25rem;
    --sp-8: 3rem;
  }
}