/* ===========================================================================
   MAX-G STUDIOS - DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, and
   breakpoint values. Every other stylesheet should reference these
   custom properties rather than hard-coded values.

   Palette direction: premium aerospace / avionics-document light system.
   Warm off-white + cool pale gray-blue as the dominant site environment,
   graphite text, charcoal as the selective dark contrast, MAX-G orange
   reserved for CTAs/emphasis/active-states, steel-blue as a restrained
   secondary technical accent (used sparingly - never a second brand color).
=========================================================================== */
:root{

  /* ---- Light system (default) -------------------------------------- */
  --bg:#f8f6f2;                 /* warm off-white, primary page ground */
  --bg-alt:#eef1f3;             /* pale cool gray-blue, secondary sections */
  --surface:#ffffff;            /* cards, form fields, raised panels */
  --surface-2:#f2f4f5;          /* nested/inset surface on white */

  --ink:#1a2024;                /* graphite, primary text */
  --ink-soft:#4c565c;           /* secondary text */
  --ink-faint:#7c868c;          /* tertiary / metadata text */
  --line:rgba(26,32,36,0.13);   /* hairline borders on light surfaces */
  --line-soft:rgba(26,32,36,0.07);

  /* ---- Charcoal (selective dark sections) ---------------------------- */
  --charcoal:#14181b;
  --charcoal-2:#1b2125;
  --charcoal-3:#232a2f;
  --on-dark:#f4f2ee;
  --on-dark-dim:rgba(244,242,238,0.78);
  --on-dark-faint:rgba(244,242,238,0.52);
  --line-dark:rgba(244,242,238,0.14);
  --line-dark-soft:rgba(244,242,238,0.08);

  /* ---- Brand accent ---------------------------------------------------
     MAX-G orange is unchanged from the existing brand so the logo and
     every legacy asset still reads as native to the site. */
  --orange:#ff7024;
  --orange-2:#e0611c;           /* hover / pressed */
  --orange-tint:rgba(255,112,36,0.10);
  --orange-tint-strong:rgba(255,112,36,0.16);
  --orange-line:rgba(255,112,36,0.45);

  /* Restrained secondary technical accent - aviation steel-blue. Darkened
     from the old dark-mode value so it still holds contrast on white. */
  --steel:#3d6178;
  --steel-2:#2c4a5c;
  --steel-tint:rgba(61,97,120,0.09);
  --steel-line:rgba(61,97,120,0.35);

  /* Status */
  --error:#c2410c;
  --success:#2f7a4d;

  /* ---- Type ------------------------------------------------------------ */
  --font-display:'Big Shoulders Display',sans-serif;
  --font-label:'Rajdhani',sans-serif;
  --font-body:'Newsreader',Georgia,serif;

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:12px;
  --space-sm:16px;
  --space-md:28px;
  --space-lg:48px;
  --space-xl:clamp(80px, 4vw, 110px);
  --space-2xl:clamp(120px, 6vw, 170px);

  /* ---- Layout ------------------------------------------------------------
     --container is the main content/grid wrapper (cards, tiers, hero copy
     blocks) - fluid so it genuinely widens on large monitors instead of
     hard-capping at a typical-desktop number. --container-narrow and
     --container-prose stay fixed: they hold body text and forms, and a
     wider column there would blow past a readable 65-80 character line
     regardless of how much screen is available. */
  --container:min(92vw, 1800px);
  --container-narrow:820px;
  --container-prose:680px;
  /* Capped so this doesn't keep eating an ever-larger share of the
     already-capped --container on very wide screens - uncapped 6vw would
     consume 600px+ of padding at 5120px, badly narrowing the content area
     the widened --container was meant to open up. Unchanged at <=1440px. */
  --gutter:clamp(20px, 6vw, 96px);

  /* ---- Radius / shadow / border ------------------------------------------ */
  --radius-sm:4px;
  --radius:8px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(20,24,27,0.06);
  --shadow-md:0 6px 20px rgba(20,24,27,0.08);
  --shadow-lg:0 18px 48px rgba(20,24,27,0.12);

  /* ---- Motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.25,.7,.3,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.6s;

  /* ---- Z-index scale ------------------------------------------------------ */
  --z-nav:100;
  --z-menu:110;
  --z-overlay:120;

  color-scheme: light;
}

/* Breakpoints (documented, not usable as var() inside media queries):
   480 / 640 / 820 / 980 / 1200 / 1440
*/