/* ==========================================================================
   Blue Bay - design tokens.
   EVERY raw value lives here: colour, type, space, radius, shadow, motion,
   z-index. A hex code in any other stylesheet is a bug.
   Brand colours were sampled from Content/Logo.jpg.
   ========================================================================== */

:root {
  /* --- Colour: brand ------------------------------------------------------ */
  --brand:        #294b95;   /* "Blue Bay" wordmark */
  --brand-deep:   #1c3673;
  --sea:          #249cd9;   /* the logo's wave - decoration and large type only */
  --sea-ink:      #0d6aa3;   /* sea blue dark enough for text: 5.2:1 on paper, 4.7:1 on paper-2 */
  --coral:        #ec3722;   /* the fish's eye - decoration only */
  --coral-ink:    #b8281a;   /* coral dark enough for text: 5.6:1 on paper */

  /* --- Colour: surfaces --------------------------------------------------- */
  --paper:        #f7f2e8;   /* page ground: warm, like a menu board */
  --paper-2:      #efe6d3;   /* alternate band */
  --card:         #fffdf8;
  --deep:         #0f1e40;   /* offers band, footer */
  --deep-2:       #16295a;

  /* --- Colour: ink -------------------------------------------------------- */
  --ink:          #0f1e40;   /* 14.7:1 on paper */
  --ink-soft:     #45516d;   /* 7.1:1 on paper, 6.4:1 on paper-2 */
  --ink-on-deep:  #f7f2e8;
  --ink-on-deep-soft: #c3cbe0; /* 10.1:1 on deep. All ratios: python tools/check-site.py */
  --line:         rgb(15 30 64 / 0.14);
  --line-strong:  rgb(15 30 64 / 0.32);
  --line-on-deep: rgb(247 242 232 / 0.18);
  --focus:        #b4470b;   /* focus ring on light grounds: 4.9:1 on paper, 4.4:1 on paper-2 (needs 3:1) */
  --focus-on-deep: #249cd9;  /* focus ring on the navy footer, 404 and error pages */
  --tint-brand:   rgb(41 75 149 / 0.08);
  --tint-sea:     rgb(36 156 217 / 0.16);
  --header-bg:    rgb(247 242 232 / 0.92);
  --sticker-dash: rgb(247 242 232 / 0.6);
  --scrim:        rgb(15 30 64 / 0.55);

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Changa", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body:    "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-xl:   clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --fs-2xl:  clamp(2.5rem, 1.7rem + 4vw, 5rem);
  --fs-2xl-latin: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem); /* English runs longer than Arabic */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  --fw-body:    380;
  --fw-medium:  500;
  --fw-bold:    650;
  --fw-display: 750;
  --fw-black:   800;

  /* --- Space -------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --gutter:    clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure:   38rem;
  --page-max:  76rem;
  --header-h:  4.5rem;
  --header-h-phone: 6.6875rem;  /* brand row + nav row = 106.6px measured at 390px; re-measure if chrome.css changes */

  /* --- Shape -------------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius:    0.875rem;
  --radius-lg: 1.5rem;
  --radius-arch: 999px 999px 1.5rem 1.5rem;
  --radius-pill: 999px;
  --border:    1px;
  --border-thick: 2px;
  --focus-w:   3px;          /* focus outline width and offset */
  --ring:      4px;          /* soft halo, e.g. the open-now dot */
  --underline: 3px;          /* current-page bar under a nav link */
  --lift:      -4px;         /* card rise on hover */
  --press:     1px;          /* button sink on press */
  --blur-header: 10px;

  --shadow-sm: 0 1px 2px rgb(15 30 64 / 0.08), 0 2px 6px rgb(15 30 64 / 0.06);
  --shadow:    0 2px 4px rgb(15 30 64 / 0.06), 0 12px 28px -8px rgb(15 30 64 / 0.22);
  --shadow-lg: 0 24px 48px -16px rgb(15 30 64 / 0.35);

  /* --- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  140ms;
  --dur:       240ms;

  /* --- Layers ------------------------------------------------------------- */
  --z-raised: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-skip:   50;

  /* --- Imagery ------------------------------------------------------------ */
  --photo-ground: #d8cdb6;  /* shown while a photo decodes, matches paper-2 */
  --map-grid-a: 46px;        /* street pattern on the map facade */
  --map-grid-b: 70px;

  color-scheme: light;
}