/* =========================================================
   Quantic · Design tokens
   One place for colors, type, spacing and motion.
   Light is the default; dark overrides live under [data-theme="dark"].
   ========================================================= */

:root {
  /* ---- Brand (same in both themes) ---- */
  --red: #E1262C;          /* brand red: logo, accents, buttons */
  --red-strong: #C21E24;   /* button hover */
  --red-deep: #4A0B0F;     /* showcase panels, CTA band */

  /* ---- Light theme ---- */
  --bg: #FFFBF5;           /* paper */
  --surface: #FFFBF5;      /* cards */
  --text: #000000;
  --text-muted: rgba(0, 0, 0, 0.72);
  --text-soft: rgba(0, 0, 0, 0.5);
  --line: rgba(225, 38, 44, 0.35);      /* hairlines */
  --line-strong: var(--red);
  --grid: rgba(225, 38, 44, 0.12);      /* background drafting grid */
  --grid-hot: rgba(225, 38, 44, 0.55);  /* grid near the cursor */
  --logo: var(--red);
  --logo-plate: transparent;            /* behind client / partner logos */
  --footer-bg: #120506;
  --footer-text: #FFFBF5;
  --on-red: #FFFBF5;
  --shadow-device: 0 30px 60px rgba(30, 0, 4, 0.35);

  /* ---- Type ---- */
  --font: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-display: clamp(2.75rem, 1.4rem + 4.2vw, 4.5rem);   /* 44 → 72 */
  --fs-h2: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);        /* 36 → 56 */
  --fs-statement: clamp(1.625rem, 1.1rem + 1.7vw, 2.75rem); /* 26 → 44 */
  --fs-cta: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);        /* 40 → 72 */
  --fs-h3: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);      /* 22 → 28 */
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); /* 17 → 22 */
  --fs-body: 1.125rem;   /* 18 */
  --fs-small: 1rem;      /* 16 */
  --fs-xs: 0.875rem;     /* 14 */
  --tracking-tight: -0.03em;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 120px);
  --section-pad: clamp(64px, 2.5rem + 7vw, 160px);  /* top & bottom of every section */
  --grid-size: 120px;                             /* the drafting grid cell */
  --header-h: 96px;
  --radius: 4px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: #110708;
  --surface: #1C0B0D;
  --text: #FFFBF5;
  --text-muted: rgba(255, 251, 245, 0.74);
  --text-soft: rgba(255, 251, 245, 0.5);
  --line: rgba(225, 38, 44, 0.45);
  --grid: rgba(225, 38, 44, 0.16);
  --grid-hot: rgba(255, 90, 95, 0.75);
  --logo-plate: #F5EDE6;
  --footer-bg: #090304;
  --shadow-device: 0 30px 60px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1024px) {
  :root { --header-h: 80px; }
}