/* ==========================================================================
   Mobily brand tokens
   Values taken verbatim from "Mobily Brand Essentials — Partner & Vendor
   Guide", pages 03-05 and 14. Never sample or convert these by eye.
   ========================================================================== */

:root {
  /* --- Primary palette (p.03) ------------------------------------------- */
  --mobily-blue:        #1061FF;   /* RGB 16, 97, 255   */
  --mobily-bright-blue: #4BF5FF;   /* RGB 75, 245, 255  */
  --mobily-dark-blue:   #000050;   /* RGB 0, 0, 80      */
  --mobily-white:       #FFFFFF;

  /* --- Secondary palette (p.04) ----------------------------------------- */
  /* Accents for B2C work only. Never mixed with each other, always paired
     tone on tone with their dark partner. Unused by the kiosk shell today —
     kept here so nobody re-derives them from a screenshot later. */
  --mobily-green:        #00E66E;
  --mobily-dark-green:   #002D0A;
  --mobily-yellow:       #FFDC00;
  --mobily-dark-yellow:  #4B1E00;
  --mobily-orange:       #FF5A3C;
  --mobily-burgundy:     #41001E;

  /* --- Gradients (p.05) -------------------------------------------------
     Gradients always run corner to corner. Stop percentages below are an
     even-spaced placeholder: the fixed percentages live in the construction
     diagrams on the Brand Hub. Swap them in here — one place — once we have
     them, and do not adjust the 135deg angle. */
  --gradient-1: linear-gradient(135deg, var(--mobily-blue) 0%, var(--mobily-bright-blue) 100%);
  --gradient-2: linear-gradient(135deg, var(--mobily-blue) 0%, var(--mobily-dark-blue) 100%);
  --gradient-3: linear-gradient(135deg, var(--mobily-bright-blue) 0%, var(--mobily-blue) 50%, var(--mobily-dark-blue) 100%);

  /* Canvas is Gradient #2, weighted so the mass of the screen sits in Dark
     Blue. White body copy then clears WCAG AA everywhere on the page. */
  --canvas: linear-gradient(135deg, #1B4FD4 0%, #0A2596 34%, var(--mobily-dark-blue) 100%);

  /* --- Typography (p.14) ------------------------------------------------
     Mobily Headline: headings and key messaging only, never all caps.
     Mobily Text: body and long-form only, never for headings.
     Licensed files come from the Brand Hub — drop the @font-face blocks in
     fonts.css and these two vars pick them up with no other edits. */
  --font-headline: 'Mobily Headline', 'Helvetica Neue', Arial, sans-serif;
  --font-text:     'Mobily Text', 'Helvetica Neue', Arial, sans-serif;

  /* --- Surfaces & strokes ------------------------------------------------ */
  --surface:        rgba(0, 0, 80, 0.46);
  --surface-raised: rgba(0, 0, 80, 0.68);
  --stroke:         rgba(255, 255, 255, 0.16);
  --stroke-strong:  rgba(75, 245, 255, 0.55);
  --text-muted:     rgba(255, 255, 255, 0.66);

  /* --- Geometry ----------------------------------------------------------
     The margin (X) drives logo size, meem construction and page rhythm
     (p.08, p.12). 10% of the short edge for standard formats. */
  --margin-x: clamp(32px, 6vh, 72px);
  --radius-card: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}