/* Design tokens from the Fluttergini Figma style guide. */

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Colour styles */
  --base-chalk: #f1f2ee;
  --base-surface: #ffffff;
  --base-line: #d7dcd5;
  --text-ink: #16201d;
  --text-muted: #56625d;
  --floor-green: #1d3b34;
  --floor-ink: #eef3ef;
  --floor-muted: #a9bdb4;
  --floor-line: #2f5048;
  --floor-card: #2f4b44;
  --floor-input: #2c4841;
  --accent-blue: #2152d4;
  --accent-blue-hover: #1b45b3;
  --accent-blue-soft: #e4ebfc;
  --plate-red: #d8342b;
  --plate-yellow: #e2ae1f;
  --plate-yellow-hover: #cf9d14;
  --plate-green: #2e8b57;
  --state-ok: #1f7a4a;
  --state-ok-soft: #e1f2e8;
  --device-body: #0e1513;

  /* Fonts */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /*
   * Fluid sizing: values run from the Mobile 390 frame to the Desktop 1440 frame
   * and stop at both ends. --fluid is 0 at 390px and 1px per 1050px of extra width.
   */
  --fluid: clamp(0px, (100vw - 390px) / 1050, 1px);

  --fs-h1: calc(52px + 52 * var(--fluid));
  --fs-h2: calc(42px + 26 * var(--fluid));
  --fs-h2-small: calc(40px + 20 * var(--fluid));
  --fs-card-title: calc(38px + 6 * var(--fluid));
  --fs-h3: calc(28px + 2 * var(--fluid));
  --fs-h3-small: calc(24px + 2 * var(--fluid));
  --fs-price: calc(32px + 2 * var(--fluid));
  --fs-amount: calc(28px + 2 * var(--fluid));
  --fs-step: calc(48px + 8 * var(--fluid));
  --fs-logo: calc(24px + 4 * var(--fluid));

  --fs-lede: calc(18px + 2 * var(--fluid));
  --fs-large: calc(17px + 1 * var(--fluid));
  --fs-default: calc(16px + 1 * var(--fluid));
  --fs-small: calc(15px + 0.5 * var(--fluid));
  --fs-question: calc(17px + 1 * var(--fluid));
  --fs-meta: 14px;
  --fs-caption: 13px;

  /* Layout */
  --content-max: 1152px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: calc(72px + 24 * var(--fluid));
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-board: 0 28px 56px -20px rgb(22 32 29 / 0.2);
  --shadow-device: 0 30px 60px -24px rgb(14 21 19 / 0.45);
  --focus-ring: 0 0 0 3px var(--base-chalk), 0 0 0 5px var(--accent-blue);
}