/* ==========================================================================
   DESIGN TOKENS — Variables
   All CSS Custom Properties for the design system.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type Scale */
  --text-display: clamp(2.75rem, 9vw, 7rem);
  --text-display--line-height: .9;
  --text-display--letter-spacing: -.02em;
  --text-display--font-weight: 800;

  --text-h2: clamp(1.75rem, 4vw, 3rem);
  --text-h2--line-height: 0.9;
  --text-h2--letter-spacing: -.015em;
  --text-h2--font-weight: 700;
  --text-h2--text-transform: uppercase;

  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-h3--line-height: 1.15;
  --text-h3--font-weight: 700;

  /* Color Palette */
  --green-light: #92ff60;
  --green-mid: #276120;
  --green-dark: #113b29;

  --gold-soft: #a6ff7c;
  --forest: #113b29;
  --forest-2: #164632;
  --forest-3: #276120;
  --charcoal: #0e1a14;
  --charcoal-2: #13241b;
  --cream: #f4efe3;
  --cream-dim: #ebe2cd;
  --paper: #fbf8f1;
  --ink: #111a14;
  --ink-soft: #4a5c51;
  --ink-faint: #73877b;

  /* Borders & Lines */
  --line: rgba(17, 59, 41, 0.12);
  --line-on-dark: rgba(146, 255, 96, 0.18);

  /* Layout */
  --container: 1280px;
  --pad: clamp(24px, 5vw, 72px);

  /* Effects */
  --radius-s: 4px;
  --radius-m: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}