/* ==========================================================================
   variables.css — Design tokens
   Source: docs/DESIGN-SYSTEM.md
   Values marked ASSUMPTION are estimated from JPEG reference screenshots and
   must be reconciled against the live Adobe XD file before final sign-off.
   ========================================================================== */

:root {
  /* ---- Color: neutrals ---- */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #1a1a1a;
  --color-bg-tertiary: #2b2b2b;
  --color-surface-light: #d9d9d9;
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Color: gold / brand accent ----
     --color-gold corrected to #a88e43 per the live reference site's actual
     compiled Tailwind value (border-gold-500), replacing the earlier
     JPEG-sampled estimate of #c9a44c. */
  --color-gold: #a88e43;
  --color-gold-light: #e8c98a;
  --color-gold-gradient-start: #d9a441;
  --color-gold-gradient-end: #a8823a;

  /* ---- Color: text ---- */
  --color-text-primary: #f5f3ef;
  --color-text-secondary: #b9b6ae;
  --color-text-dark: #1a1a1a;
  --color-text-on-gold: #1a1a1a;

  /* ---- Color: enterprise card gradients ---- */
  --color-card-education: linear-gradient(135deg, #d9a441, #a8823a);
  --color-card-healthcare: linear-gradient(135deg, #2e7d5b, #1b3a63);
  --color-card-sports: linear-gradient(135deg, #d9a441, #a8823a);
  --color-card-media: linear-gradient(135deg, #5b2e91, #3a1b63);
  --color-card-realestate: linear-gradient(135deg, #00b28a, #00e0a8);
  --color-card-hospitality: linear-gradient(135deg, #3a0f0f, #7a1f1f);
  --color-card-agriculture: linear-gradient(135deg, #d9a441, #a8823a);

  /* ---- Color: borders ---- */
  --color-border-subtle: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.3);
  --color-border-gold: var(--color-gold);

  /* ---- Typography: families ----
     ASSUMPTION: no font files were supplied (docs/ASSET-MAP.md §7.1).
     Playfair Display / Poppins are the closest publicly-available match to
     the serif-italic display face and grotesque body face seen in the
     reference screenshots. Replace with the real brand fonts the moment
     they are supplied — see docs/DESIGN-SYSTEM.md §9. */
  --font-display: "Nicholas W01 Italic";
  /* --font-body corrected to Inter per the live reference site's compiled
     CSS custom property (--font-body: "Inter","Inter Fallback"). */
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---- Typography: fluid sizes (clamp: min, preferred, max) ---- */
  --fs-h1: clamp(2.25rem, 1.2rem + 4.5vw, 4rem);
  /* fs-h2 max corrected to 36px (2.25rem) per reference's .text-h2 utility
     (was 44px/2.75rem, a JPEG-sampled estimate). */
  --fs-h2: clamp(1.75rem, 1.1rem + 2vw, 2.25rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-body-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.9375rem;

  /* ---- Typography: weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Typography: line-height ---- */
  --lh-tight: 1.1;
  --lh-normal: 1.4;
  --lh-relaxed: 1.7;

  /* ---- Typography: letter-spacing ---- */
  --ls-nav: 0.02em;
  --ls-button: 0.08em;

  /* ---- Layout ----
     container-width is intentionally generous (well beyond the 1920px
     reference canvas) — the reference has no defined behavior for ultra-wide
     viewports, and a tighter cap was auto-centering content with large empty
     margins on wide screens, pulling text inward away from the left edge the
     reference shows it hugging. Padding-inline remains the real left/right
     inset on all realistic screen sizes; the max-width only guards against
     truly extreme (>2560px) viewports. */
  --container-width: 2560px;
  --container-padding-inline: 80px;
  --container-padding-inline-tablet: 40px;
  --container-padding-inline-mobile: 20px;

  --grid-gap: 24px;
  --grid-gap-sm: 16px;

  --header-height: 150px;
  --header-height-mobile: 80px;

  /* ---- Spacing scale ---- */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-2xl: 96px;
  --spacing-3xl: 140px;

  /* ---- Border / radius / shadow ----
     The design is intentionally sharp-cornered and flat — see
     docs/DESIGN-SYSTEM.md §6. Kept as tokens for consistency, not because
     rounding/shadows are actually used anywhere. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --border-width-thin: 1px;
  --border-width-accent: 2px;
  --shadow-none: none;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-overlay: 190;
}

/* Respect reduced-motion preference globally (CLAUDE.md §20) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}