/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS  ·  tokens.css
   Single source of truth for palette, fonts, layout vars.
   All other CSS files reference these — never hardcode values.
═══════════════════════════════════════════════════════ */

:root {
   /* ── Palette ── */
   --c-black: #141414;
   /* deepest bg, high-contrast areas        */
   --c-bg: #222222;
   /* page bg, button fill                   */
   --c-grey: #8a8a8a;
   /* body text, H3, H5, secondary labels    */
   --c-olive-dark: #8f851e;
   /* slogan accent line, dimmed accent      */
   --c-olive: #d4c62c;
   /* mid-tone gold, supporting accent       */
   --c-yellow: #fceb34;
   /* primary accent: H4 H6 bullets waves    */
   --c-yellow-light: #eee480;
   /* soft tint, hover states (future)       */
   --c-white: #dfdcd6;
   /* H1, H2, bold text, primary headings    */
   --c-error: #ff6b6b;
   /* form error state, validation messages   */

   /* ── Palette — RGB components for rgba() usage ── */
   --c-yellow-rgb: 252, 235, 52;
   --c-grey-rgb: 138, 138, 138;
   --c-white-rgb: 223, 220, 214;
   --c-black-rgb: 20, 20, 20;


   /* ── Divider ── */
   --c-divider: rgba(var(--c-yellow-rgb), 0.45);
   /* solid 1px line used across all sections */

   /* ── Fonts ── */
   --f-display: 'Staatliches', sans-serif;
   --f-body: 'Chivo', sans-serif;

   /* ── Layout ── */
   --design-w: 1280px;
   --pad: 80px;

   /* ── Dot-grid background (consumed by js/dot-circle.js) ── */
   --dot-color: #454545;
   --dot-radius: 0.9px;
   --dot-spacing: 20px;
}


/* ═══════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════ */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
}

h1,
h2,
h3,
p,
ul {
   margin: 0;
   padding: 0;
   font-weight: inherit;
}

a {
   text-decoration: none;
   color: inherit;
}

ul {
   list-style: none;
}

img {
   display: block;
   max-width: 100%;
}


/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */
body {
   font-family: var(--f-body);
   font-size: 16px;
   font-weight: 400;
   color: var(--c-grey);
   background: transparent;
   overflow: auto;
}