/*
  Design language: a premium international exhibition-fabrication company —
  clean corporate white, near-black premium dark sections, and a deep
  coral/red signal color used for CTAs and highlights (replacing the
  earlier construction-amber "blueprint" palette). Rounded, soft-shadowed
  surfaces throughout rather than the sharp technical-drawing edge used
  previously.
*/

:root {
  /* ---- Color: ink (dark, premium near-black — no blue/color cast) ---- */
  --ink-950: #111111;
  --ink-900: #181818;
  --ink-850: #202020;
  --ink-800: #262626;
  --ink-700: #363636;
  --ink-500: #6B7280;
  /* Subtle lighter stop for dark-surface gradients — neutral, not a color
     tint, so dark sections read as "premium black" rather than "navy" */
  --ink-glow: #1A1A1A;

  /* ---- Color: paper (light, clean neutral white) ---- */
  --paper-0: #FFFFFF;
  --paper-50: #F7F7F8;
  --paper-100: #EFEFF1;
  --line-200: #E2E2E5;
  --line-300: #D0D0D5;

  /* ---- Color: signal (deep coral / premium red — used sparingly) ---- */
  --accent-500: #C1443A;
  --accent-600: #A13328;
  --accent-100: #F8E2DE;
  /* Lighter warm coral — glow/highlight use on dark surfaces (headline
     accents, glowing shadows), never flat body text or fill. */
  --accent-glow: #E8695A;

  /* ---- Diagram semantics: the hero illustration re-themes these locally
     (see .hero-dark) so the same SVG markup works on light or dark ---- */
  --diagram-stroke: var(--ink-900);
  --diagram-stroke-soft: var(--line-300);
  --diagram-fill-fascia: var(--accent-100);
  --diagram-text: var(--text-secondary);
  --diagram-accent: var(--accent-600);
  --diagram-scrim: var(--surface-band);

  /* ---- Semantic text ---- */
  --text-primary: #202020;
  --text-secondary: #6B7280;
  --text-inverse: var(--paper-0);
  --text-inverse-muted: #9CA3AF;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--paper-0);
  --surface-raised: #FFFFFF;
  --surface-band: var(--paper-50);
  --surface-dark: var(--ink-950);
  --surface-dark-raised: var(--ink-900);
  --border-subtle: var(--line-200);
  --border-strong: var(--line-300);
  --border-dark: var(--ink-700);

  /* ---- Typography: three roles, all system-loaded (zero font requests).
     Tuned toward the Inter/Manrope proportions (tall x-height, tight
     tracking) via each platform's own variable UI font rather than a
     Google Fonts request, so the premium feel doesn't cost a render-
     blocking network round trip. ---- */
  --font-display: -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* Type scale (fluid, clamps for mobile-first) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.6rem + 1.3vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2.1vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 2rem + 3.4vw, 4.75rem);
  /* Hero/display only — bigger and more confident than the old 4xl ceiling,
     the scale a Tesla/Apple-style hero headline actually needs at 1440-1920px */
  --text-5xl: clamp(3.25rem, 1.6rem + 6.5vw, 6.5rem);
  /* Stat "readout" numerals — mono, tabular, large; ties counters to the
     dashboard/CAD vernacular already established rather than generic display type */
  --text-readout: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- Spacing scale (8px base unit) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---- Radius: soft, rounded premium-corporate feel throughout (replacing
     the earlier sharp 2-4px "technical drawing" edge) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadow: soft and layered — the premium "expensive" feel comes from
     shadow softness/spread, not color ---- */
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-md: 0 4px 16px rgba(32, 32, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(32, 32, 32, 0.12);
  --shadow-xl: 0 24px 64px -12px rgba(17, 17, 17, 0.35);
  --shadow-glow-accent: 0 0 0 1px rgba(232, 105, 90, 0.25), 0 8px 32px -4px rgba(232, 105, 90, 0.35);
  --shadow-card-hover: 0 20px 40px -16px rgba(32, 32, 32, 0.22);

  /* ---- Glass surfaces (floating callouts, widget) ---- */
  --glass-bg-dark: rgba(24, 24, 24, 0.55);
  --glass-border-dark: rgba(255, 255, 255, 0.14);
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-border-light: rgba(32, 32, 32, 0.08);
  --glass-blur: 20px;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --content-narrow: 760px;
  --header-height: 76px;
  /* Combined real height of the 3 stacked header rows (utility bar + ticker +
     main nav), used so the hero can size itself against the actual remaining
     viewport instead of a flat 100vh that ignores the header sitting above it.
     Utility bar is hidden below 768px, so the mobile total is smaller. */
  --header-total-height: 113px; /* ticker (36px) + main nav (76px) + 1px border */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-slower: 900ms;
  --duration-draw: 2200ms;
  --stagger-step: 70ms;

  /* ---- Hero dark surface gradient ---- */
  --gradient-hero: radial-gradient(120% 140% at 15% 0%, var(--ink-glow) 0%, var(--ink-900) 45%, var(--ink-950) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-draw: 0ms;
    --stagger-step: 0ms;
  }
}

/* Utility bar becomes visible at 768px+, adding its height to the total */
@media (min-width: 768px) {
  :root {
    --header-total-height: 146px; /* utility (32px) + ticker (36px) + main nav (76px) + 2px borders */
  }
}