/* THE CLUB Sheraton — shared foundation for the public site (/) and the member portal (/my).
   Tokens come from the crest: petrol disc, silver ring, Egyptian flag stripe. */

@font-face { font-family: "Club Kufi"; src: url("/assets/club/fonts/NotoKufiArabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Club Kufi"; src: url("/assets/club/fonts/NotoKufiArabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Club Kufi"; src: url("/assets/club/fonts/NotoKufiArabic-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Club Sans"; src: url("/assets/club/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Club Sans"; src: url("/assets/club/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Club Sans"; src: url("/assets/club/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Club Sans"; src: url("/assets/club/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* crest */
  --petrol: #04444d;
  --petrol-deep: #022e35;
  --petrol-ink: #01242a;
  --petrol-mid: #0a5862;
  --silver: #c9ced0;
  --silver-light: #e9eced;
  --silver-dim: #9aa6aa;
  --flag-red: #cb282d;
  --flag-black: #111314;

  /* system */
  --teal: #0d7377;
  --teal-strong: #0a5f63;
  --teal-soft: #e2f0f0;
  --paper: #f3f5f4;
  --paper-2: #e9eeed;
  --surface: #ffffff;
  --ink: #0e1a1c;
  --ink-2: #23383b;
  --muted: #536568;
  --line: #d9e1e1;
  --line-strong: #c3cecf;

  --ok: #1a7f52;
  --ok-soft: #e1f3ea;
  --warn: #9a6514;
  --warn-soft: #fbefd9;
  --bad: #b52227;
  --bad-soft: #fbe7e7;

  /* on petrol */
  --on-petrol: #f2f5f5;
  --on-petrol-2: #b9cccd;

  --font-display: "Club Kufi", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Club Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-1: 0 1px 2px rgba(2, 46, 53, .06), 0 2px 8px rgba(2, 46, 53, .05);
  --shadow-2: 0 2px 6px rgba(2, 46, 53, .08), 0 16px 40px -12px rgba(2, 46, 53, .22);
  --shadow-card: 0 2px 4px rgba(1, 36, 42, .12), 0 24px 48px -16px rgba(1, 36, 42, .45);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
  accent-color: var(--teal);
  caret-color: var(--teal);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.35; margin: 0; text-wrap: balance; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-strong); text-decoration-thickness: 1px; text-underline-offset: .25em; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--petrol); color: var(--on-petrol); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Latin identifiers, codes and numbers inside Arabic keep their own order. */
.ltr, .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num, .tabular { font-variant-numeric: tabular-nums; }

.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Directional glyphs point the way the reading goes. */
.i-flip { transform: scaleX(-1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}