/* QINFENG design tokens.
   Values taken from the site design system (DESIGN.md sections 3-5). */

:root {
  /* Brand */
  --color-brand: #55C83A;
  --color-signal: #D4FF00;
  --color-deep-green: #0D4B3E;
  --color-navy: #123B5D;
  --color-navy-dark: #0B263D;
  --color-ink: #15211E;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-soft: #F5F7F6;
  --color-mist: #E9EEEC;
  --color-slate: #5D6B67;
  --color-pale-green: #EDF7E9;
  --color-pale-blue-gray: #D5E0E7;

  /* Functional */
  --color-info: #2E6F9E;
  --color-warning: #D58A24;
  --color-error: #B6463C;

  /* Type */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --leading-tight: 1.08;
  --leading-body: 1.6;
  --tracking-title: -0.025em;

  /* Layout */
  --container: 1200px;
  --gutter: 64px;
  --section-y: 96px;

  /* Space */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 18px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Radii */
  --radius-control: 10px;
  --radius-button: 11px;
  --radius-card: 16px;
  --radius-large: 24px;

  /* Elevation */
  --shadow-sm: 0 4px 18px rgba(11, 38, 61, .06);
  --shadow-md: 0 16px 40px rgba(11, 38, 61, .12);
}

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --section-y: 64px;
  }
}