/* ==========================================================================
   MyVizionStudio — design tokens
   MyVizionStudio skin: pure-black canvas, one hot red accent, Oswald + Raleway.
   Measured from the reference template. See DESIGN.md.
   These tokens are the ONLY thing a new site skin needs to change.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --mzv-accent: #db0018;            /* hot red — the single brand hue (fills / borders) */
  --mzv-accent-rgb: 219, 0, 24;     /* same hue as R,G,B — used in rgba() tints */
  --mzv-accent-hover: #a60000;      /* darker red for hover/active */
  --mzv-text-accent: #ff4d63;       /* lighter accent for TEXT (WCAG AA on black) */
  --mzv-on-accent: #ffffff;         /* text/icon colour on top of an accent fill */

  /* --- Surfaces --------------------------------------------------------- */
  --mzv-bg: #000000;                /* true black canvas */
  --mzv-surface: #151515;           /* lifted panel / alt section */
  --mzv-surface-2: #0b0b0b;         /* deeper inset */
  --mzv-border: #2d2d2d;            /* hairline rules */
  --mzv-border-soft: #1c1c1c;

  /* --- Text ------------------------------------------------------------- */
  --mzv-text: #e0e0e0;              /* body on black */
  --mzv-text-muted: #8f8f8f;        /* secondary / captions (>=4.5:1 on bg + surface) */
  --mzv-text-strong: #fafafa;       /* headings / high emphasis */

  /* --- Type ------------------------------------------------------------- */
  --mzv-font-display: "Oswald", "Arial Narrow", sans-serif;
  --mzv-font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* fluid display sizes: huge on hero, tiny on eyebrows */
  --mzv-fs-hero: clamp(3.5rem, 14vw, 7.2rem);   /* ~115px at desktop */
  --mzv-fs-display: clamp(2.25rem, 6vw, 3.75rem);
  --mzv-fs-stat: clamp(4rem, 12vw, 8rem);
  --mzv-fs-h2: clamp(1.35rem, 3.2vw, 2rem);
  --mzv-fs-eyebrow: 0.9375rem;      /* 15px uppercase red label */
  --mzv-fs-body: 1rem;              /* 16px */
  --mzv-fs-small: 0.875rem;

  --mzv-tracking-display: 0.02em;
  --mzv-tracking-eyebrow: 0.18em;

  /* --- Space / layout --------------------------------------------------- */
  --mzv-space-unit: 8px;
  --mzv-section-y: clamp(4rem, 9vw, 8.5rem);   /* vertical section rhythm */
  --mzv-gap: clamp(1rem, 2vw, 1.75rem);
  --mzv-maxw: 72rem;
  --mzv-maxw-narrow: 44rem;
  --mzv-radius: 4px;                /* near-square, architectural */

  /* --- Motion ----------------------------------------------------------- */
  --mzv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mzv-dur: 0.7s;
}