/* DailyOKC — design tokens.
   ---------------------------------------------------------------------------
   The brief: a marketing and content studio in Oklahoma City whose name is a
   promise about cadence. Everything here is derived from that.

   Colour. Oklahoma is usually drawn in red dirt and dust, which lands on the
   same warm-earth palette every agency site already uses. This goes the other
   way: the city as it looks from about 8pm — violet-black sky, hot pink, pool
   aqua, and the one yellow that survives from the afternoon. Pink and aqua are
   grounds here, not accents; that is what keeps it away from the usual
   single-accent-on-near-black look.

   Porcelain is deliberately a cool blue-grey, not cream. Cream plus a serif is
   the default editorial look and it fights the neon.
   --------------------------------------------------------------------------- */

:root {
  /* --- ground ------------------------------------------------------------ */
  --ink: #12101c;          /* violet-black; the dark ground */
  --ink-2: #1b1830;        /* one step up, for cards on ink */
  --ink-3: #272247;        /* borders and dividers on ink */
  --porcelain: #e9eef1;    /* cool light ground */
  --porcelain-2: #dae2e8;  /* light ground, one step down */

  /* --- accents ---------------------------------------------------------- */
  --hibiscus: #ff2e7e;     /* primary. the daily stamp, links, the signature */
  --pool: #12cfc0;         /* secondary. counts, states, the aqua half */
  --sun: #ffd23f;          /* tertiary. the afternoon that survives to night */
  --dusk: #4a2e7a;         /* mid violet. sky mids, glows, soft borders */

  /* --- text ------------------------------------------------------------- */
  --on-ink: #f3f1f8;
  --on-ink-soft: #a9a4c2;
  --on-light: #171426;
  --on-light-soft: #56526e;

  /* --- type ------------------------------------------------------------- */
  --display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --step--1: clamp(0.76rem, 0.73rem + 0.14vw, 0.85rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.28rem + 1.3vw, 2.35rem);
  --step-3:  clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  --step-4:  clamp(2.6rem, 1.5rem + 5vw, 5.4rem);
  /* step-5 is the hero only. Capped so the three-line headline plus its
     sub, buttons and meta row still clear the fold on a 900px-tall laptop. */
  --step-5:  clamp(2.6rem, 1.2rem + 7vw, 6.9rem);

  /* --- space ------------------------------------------------------------ */
  --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  --pad-x: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --beat-y: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
  --shell: 1320px;

  /* --- shape and motion ------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 14px;
  --r-lg: 28px;
  --hair: 1px solid var(--ink-3);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.22s;
  --t-med: 0.5s;
}