/* ==========================================================================
   The Fourth Quarter — Design Tokens
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Caravan';
  src: url('fonts/Caravan.woff2') format('woff2'),
       url('fonts/Caravan.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SimplerPro';
  src: url('fonts/SimplerPro-Regular.woff2') format('woff2'),
       url('fonts/SimplerPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SimplerPro';
  src: url('fonts/SimplerPro-Bold.woff2') format('woff2'),
       url('fonts/SimplerPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SimplerPro';
  src: url('fonts/SimplerPro-Black.woff2') format('woff2'),
       url('fonts/SimplerPro-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color: Primary ---------------------------------------------------- */
  --q4-blue:       #042e5f;   /* Base Blue — anchor */
  --q4-white:      #ffffff;
  --q4-cyan:       #16c3ea;   /* Tomorrow's Light Blue — accent */

  /* --- Color: Complementary --------------------------------------------- */
  --q4-orange:     #f04e2d;
  --q4-green:      #8dc63f;

  /* --- Color: Secondary / Background ----------------------------------- */
  --q4-grey:       #6294bf;   /* Daily Grey — secondary text only */
  --q4-beige:      #cfcfa3;   /* Beige — warm section backgrounds */

  /* --- Color: Derived tints/shades (use sparingly) --------------------- */
  --q4-blue-900:   #021f40;
  --q4-blue-800:   #042e5f;
  --q4-blue-700:   #0a4485;
  --q4-blue-100:   #e6ecf3;
  --q4-blue-50:    #f2f5f9;

  --q4-cyan-600:   #0fa7c9;
  --q4-cyan-100:   #d1f3fb;

  --q4-orange-600: #d43e1f;
  --q4-green-600:  #6fa62c;
  --q4-beige-300:  #e2e2c8;
  --q4-beige-100:  #f4f4e7;

  --q4-ink:        #042e5f;   /* default text on light */
  --q4-ink-muted:  #6294bf;

  /* --- Typography ------------------------------------------------------- */
  /* Brand book p.24: Caravan is reserved for festive / event headlines only.
     Default headings are SimplerPro Black/Bold; body is SimplerPro Regular. */
  --ff-festive:    'Caravan', 'SimplerPro', 'Arial Hebrew', system-ui, sans-serif;
  --ff-headline:   'SimplerPro', 'Arial Hebrew', system-ui, sans-serif;
  --ff-display:    'Caravan', 'SimplerPro', 'Arial Hebrew', system-ui, sans-serif; /* legacy alias */
  --ff-body:       'SimplerPro', 'Arial Hebrew', system-ui, sans-serif;

  /* Display / Headline scale (Caravan) */
  --fs-d1: clamp(3.5rem, 5.5vw, 5.75rem);  /* 56–92 Hero */
  --fs-d2: clamp(2.75rem, 4vw, 4rem);      /* 44–64 Section titles */
  --fs-h1: 3rem;     /* 48 */
  --fs-h2: 2.25rem;  /* 36 */
  --fs-h3: 1.625rem; /* 26 */
  --fs-h4: 1.25rem;  /* 20 */

  /* Body scale (SimplerPro) */
  --fs-lead: 1.25rem;    /* 20 */
  --fs-body: 1.0625rem;  /* 17 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-eyebrow: 0.75rem; /* 12 tracking */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.01em;

  /* --- Spacing (8px base) ---------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --- Radii ----------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Shadows (restrained) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(4, 46, 95, 0.08);
  --shadow-md: 0 6px 20px -8px rgba(4, 46, 95, 0.18);
  --shadow-lg: 0 24px 48px -20px rgba(4, 46, 95, 0.28);

  /* --- Borders --------------------------------------------------------- */
  --border-hair:   1px solid rgba(4, 46, 95, 0.12);
  --border-strong: 1.5px solid var(--q4-blue);

  /* --- Grid ------------------------------------------------------------ */
  --container:     1200px;
  --container-lg:  1360px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
}

/* ---------------------------------------------------------------------- */
/* Base element defaults                                                  */
/* ---------------------------------------------------------------------- */

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

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--q4-ink);
  background: var(--q4-white);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--q4-blue);
  margin: 0;
}

.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--q4-cyan-600);
}

/* Utility LTR tag for English inline text in Hebrew contexts */
.ltr { direction: ltr; unicode-bidi: isolate; }