/* ==========================================================================
   SUN CITY — Design Tokens
   One sun. Five worlds. Every color, weight and easing traces back here.
   ========================================================================== */

:root {
  /* ---- Brand tokens (Sun City's official palette) ----------------------
     These are the literal, named brand swatches. Everything below this
     block (--sc-*) just points back to these — one source of truth. */
  --blue: #1b4fd8;
  --blue-deep: #0d2a7a;
  --yellow: #f5a800;
  --yellow-dark: #d48f00;
  --dark: #05102b;
  --white: #ffffff;
  --off: #f7f5f0;
  --gray: #6b7280;
  --lgray: #e5e7eb;

  /* Division accents */
  --clubs-purple: #a78bfa;
  --soyas-amber: #fbbf24;
  --btp-teal: #6ee7b7;
  --security-red: #fca5a5;

  /* Functional */
  --whatsapp: #25d366;

  /* ---- Brand core --------------------------------------------------- */
  --sc-primary: var(--blue);              /* Sun City electric blue — the glow */
  --sc-primary-light: #4c7dff;            /* UI-only lighter tint, not a brand swatch */
  --sc-primary-dim: var(--blue-deep);
  --sc-primary-rgb: 27, 79, 216;

  /* ---- Depth (near-black → deep navy, the "darkness" every photo cuts through)
     --dark is the one true brand background; the rest are tints mixed up
     from it so every panel/card tier stays anchored to that same color. */
  --sc-void: var(--dark);                 /* true page background */
  --sc-navy-950: color-mix(in srgb, var(--dark) 92%, white);
  --sc-navy-900: color-mix(in srgb, var(--dark) 84%, white);
  --sc-navy-800: color-mix(in srgb, var(--dark) 74%, white);
  --sc-navy-700: color-mix(in srgb, var(--dark) 62%, white);

  /* ---- Light / neutrals ---------------------------------------------- */
  --sc-white: var(--white);
  --sc-white-dim: color-mix(in srgb, var(--white) 80%, var(--dark) 20%);
  --sc-mist: var(--gray);

  /* ---- Gold — the single warm light source in every photo ------------ */
  --sc-gold: var(--yellow);
  --sc-gold-rgb: 245, 168, 0;
  --sc-gold-dim: var(--yellow-dark);

  /* ---- Per-vertical accent (each division's own brand color) ---------- */
  --sc-hue-security: var(--security-red);
  --sc-hue-btp: var(--btp-teal);
  --sc-hue-hotels: var(--yellow);         /* no dedicated hotel swatch given — using brand gold */
  --sc-hue-snack: var(--soyas-amber);
  --sc-hue-nightlife: var(--clubs-purple);

  /* ---- Glass ------------------------------------------------------------ */
  --sc-glass-fill: rgba(255, 255, 255, 0.045);
  --sc-glass-fill-strong: rgba(255, 255, 255, 0.09);
  --sc-glass-border: rgba(255, 255, 255, 0.12);
  --sc-glass-blur: 20px;

  /* ---- Type -------------------------------------------------------------
     Display  = Clash Display  (massive headlines, used with restraint)
     Body     = Inter          (clean, does the reading work)
     Utility  = Space Grotesk  (labels, numerals, countdown, eyebrows)     */
  --font-display: "Clash Display", "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-utility: "Space Grotesk", "Inter", sans-serif;

  --fs-hero: clamp(4.5rem, 13vw, 10.5rem);
  --fs-h2: clamp(1.35rem, 3vw, 2rem);
  --fs-h3: clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-eyebrow: 0.78rem;
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  --lh-tight: 0.95;
  --ls-tight: -0.03em;
  --ls-wide: 0.28em;

  /* ---- Spacing scale ------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.85rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.2s;

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1440px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --z-bg: 0;
  --z-content: 10;
  --z-nav: 40;
  --z-cursor: 100;
  --z-loader: 200;
}

/* Reduced glow intensity + shorter timings when the OS asks for less motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-med: 0.01s;
    --dur-slow: 0.01s;
  }
}