/* ---------------------------------------------------------------------------
   Design tokens.

   Every colour, type size, radius and easing the site spends lives here. Nothing
   downstream hardcodes a hex: if a value is missing, add a token rather than a literal.
   --------------------------------------------------------------------------- */

:root {
  /* Surface + ink */
  /* BrewedOps palette: #0F0F10 black, #2A2A2C charcoal, #5B5B5E grey, #F2EFE9 off-white, #C9C2B6 taupe */
  --color-bg: #0f0f10;
  --color-surface: #2a2a2c;
  --color-grey: #5b5b5e;
  --color-fg: #f2efe9;
  --color-fg-secondary: #c9c2b6;
  --color-fg-muted: #f2efe97a; /* 48% */
  --color-accent: #004aac; /* BrewedOps blue */
  --color-brand-blue: #004aac; /* brand kit: the "Ops" in the BrewedOps wordmark */
  --color-accent-on-dark: #6f9be0; /* the accent lifted to read as text on black */
  --color-brand-green: #51af43; /* brand kit: the rising arrow in the mark */
  --color-brand-brown: #3f200c; /* brand kit: coffee brown (the cup in the particle logo) */
  --particle-mark: #f2efe9; /* cup + gear particles (hero logo) */

  /* Hero (BrewedOps addition): black, logo steam in taupe */
  --color-ink: #2a2a2c; /* dark ink for light surfaces */
  --hero-steam: #c9c2b6;

  /* Hairlines are .5px in this system, never 1px */
  --color-border-soft: #f2efe90d;
  --color-border: #f2efe91a;
  --color-border-strong: #f2efe926;
  --hairline: 0.5px;

  /* The light theme the method rail inverts to */
  --color-bg-light: #f2efe9;
  --color-fg-light: #0f0f10;
  --color-border-light: #0f0f101a;

  /* Families */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-mono: 'Poppins', system-ui, sans-serif; /* name kept: every selector uses it; the whole UI is set in Poppins */

  /* Type scale */
  --text-display-feature: clamp(80px, 12vw, 200px);
  --text-display-xl: clamp(54px, 8.5vw, 111px);
  --text-display-l: clamp(48px, 6.5vw, 80px);
  --text-display-m: clamp(28px, 3.5vw, 40px);
  --text-display-s: clamp(20px, 2.2vw, 28px);
  --text-body-lead: clamp(17px, 1.4vw, 20px);
  --text-body: 15px;
  --text-body-sm: 12px;
  --text-label-l: 13px;
  --text-label: 11px;
  --text-label-s: 10px;

  /* Tracking */
  --tracking-display: -0.04em;
  --tracking-section: -0.03em;
  --tracking-label: 0.12em;
  --tracking-label-tight: 0.08em;
  --tracking-label-wide: 0.15em;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  /* Overshoots past 1 then settles - for lifts and presses that should feel
     physical. Not for anything that must land exactly on its end value. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Radii */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-nav: 32px;

  /* Layout */
  --shell-width: 1200px;
  --page-width: 1400px;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/poppins-300-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/poppins-800-latin.woff2') format('woff2');
}