/* ==========================================================================
   Design tokens — King Abdullah Sports City
   Brand colours, type ramp and motion constants are lifted directly from the
   KASC brochure so the landing page and the printed profile stay in step.
   ========================================================================== */

:root {
  /* --- Brand ribbon ------------------------------------------------------ */
  --green: #00a651;
  --blue: #0072bc;
  --orange: #f7941e;
  --red: #ed1c24;
  --yellow: #ffc20e;

  /* The ribbon as a single gradient. Used for edges and rules only — never as
     a fill, so the brand reads as a line running through the page. */
  --brand-gradient: linear-gradient(
    90deg,
    var(--green) 0%,
    var(--blue) 34%,
    var(--orange) 67%,
    var(--red) 100%
  );

  /* --- Neutrals ---------------------------------------------------------- */
  --ink: #0b0e11; /* deep ground for the dark bands */
  --ink-2: #16191c; /* brochure charcoal wordmark */
  --slate: #48535e; /* body grey */
  --slate-2: #6b7885;
  --mist: #f1f5f8;
  --mist-2: #e7edf2;
  --line: #dce4ea;
  --white: #ffffff;

  /* Tints used on the dark bands, kept as channels so opacity is tunable. */
  --on-dark: 255 255 255;
  --on-light: 11 14 17;

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* Fluid ramp: min at 360px viewport, max at 1440px. */
  --step--1: clamp(0.79rem, 0.77rem + 0.1vw, 0.85rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.18vw, 1.05rem);
  --step-1: clamp(1.13rem, 1.05rem + 0.34vw, 1.33rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.57vw, 1.69rem);
  --step-3: clamp(1.62rem, 1.41rem + 0.9vw, 2.15rem);
  --step-4: clamp(1.94rem, 1.62rem + 1.38vw, 2.73rem);
  --step-5: clamp(2.33rem, 1.85rem + 2.05vw, 3.47rem);
  --step-6: clamp(2.8rem, 2.09rem + 3vw, 4.4rem);
  --step-7: clamp(3.36rem, 2.32rem + 4.35vw, 5.6rem);

  /* --- Space ------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --shell: 1280px;
  --shell-wide: 1560px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* --- Radius, shadow ---------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgb(11 14 17 / 0.06), 0 4px 12px rgb(11 14 17 / 0.05);
  --shadow-md: 0 2px 4px rgb(11 14 17 / 0.06), 0 12px 32px rgb(11 14 17 / 0.09);
  --shadow-lg: 0 4px 8px rgb(11 14 17 / 0.08), 0 28px 64px rgb(11 14 17 / 0.16);

  /* --- Motion ------------------------------------------------------------
     One easing vocabulary for the whole page. `--ease-out` is the workhorse
     for reveals; `--ease-soft` is for anything that travels a long distance. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 240ms;
  --dur-mid: 620ms;
  --dur-slow: 1100ms;
  --dur-draw: 1800ms;

  /* Distance a reveal travels before settling. */
  --rise: 34px;
  /* Per-item delay inside a staggered group. */
  --stagger: 90ms;
}

/* Dark bands flip the text tokens rather than restating every colour. */
.band--dark {
  --fg: rgb(var(--on-dark));
  --fg-dim: rgb(var(--on-dark) / 0.62);
  --fg-faint: rgb(var(--on-dark) / 0.34);
  --hairline: rgb(var(--on-dark) / 0.14);
  --surface: rgb(var(--on-dark) / 0.045);
  --surface-hover: rgb(var(--on-dark) / 0.08);
  color: var(--fg);
  background: var(--ink);
}

.band--light {
  --fg: var(--ink-2);
  --fg-dim: var(--slate);
  --fg-faint: var(--slate-2);
  --hairline: var(--line);
  --surface: var(--white);
  --surface-hover: var(--mist);
  color: var(--fg);
  background: var(--white);
}

.band--mist {
  --fg: var(--ink-2);
  --fg-dim: var(--slate);
  --fg-faint: var(--slate-2);
  --hairline: var(--line);
  --surface: var(--white);
  --surface-hover: var(--white);
  color: var(--fg);
  background: var(--mist);
}