/* SUNGWON MÉXICO V3 — Design tokens
   An editorial system built the same way Virya's is: a clean paper
   background, warm ink text/panels, one confident accent, one deep
   secondary, a light-gray section tint, fluid type driven by clamp(), and
   an 8px base spacing unit. Hex values are our own — not Virya's — but the
   *structure* of the palette (and the fluid-scale math) is deliberately
   built the same way.
   --paper/--cream were originally warm beige (#FAF5EC/#F1E7D6) — changed
   to near-white/light-gray per direct client feedback (2026-08-15): they
   didn't want beige anywhere on the site, not just on the client-logo
   strip they screenshotted. Everything else (ink, red, teal, gold) is
   unchanged — this was scoped to the two surface tokens only. */

:root {
  /* Color — surface */
  --paper: #F7F7F5;
  --cream: #ECECE9;
  --ink: #221A14;
  --white: #FFFFFF;

  /* Color — brand */
  --sungwon-red: #D8481F;
  --sungwon-red-dark: #B23A18;
  --sungwon-teal: #204E43;
  --sungwon-teal-dark: #163A32;
  --warm-gray: #8F7F6E;
  --warm-gray-light: #C7BAA8;

  /* legacy aliases kept so nothing silently breaks while every file is
     migrated to the new names above */
  --blueprint-navy: var(--sungwon-teal);
  --navy-700: var(--sungwon-teal);
  --navy-600: var(--sungwon-teal-dark);
  --graphite: var(--ink);
  --steel-gray: var(--warm-gray);
  --drafting-white: var(--paper);
  --solar-gold: #C9862F;
  --solar-gold-dark: #A16A20;

  /* Type families */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max), same anchor logic as the
     reference site (fluid between ~375px and ~1600px viewports) */
  --text-h1: clamp(2.6rem, 1.85rem + 4.4vw, 6.2rem);
  --text-h2: clamp(2rem, 1.5rem + 2.9vw, 3.8rem);
  --text-h3: clamp(1.3rem, 1.1rem + 1.1vw, 1.9rem);
  --text-body: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --text-caption: 13px;
  --text-eyebrow: 13px;
  --text-dimension: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --text-dimension-lg: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --text-button: 15px;

  /* Grid & spacing — 8px base unit */
  --content-max: 1320px;
  --gutter: 24px;
  --section-gap: clamp(64px, 40px + 8vw, 140px);
  --section-gap-mobile: 56px;

  /* Components */
  --card-radius: 28px;
  --card-radius-sm: 18px;
  --button-radius: 100px;
  --header-height: 88px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.3s var(--ease-out);
  --transition-med: 0.6s var(--ease-out);
}