/* =========================================================================
   Backyard Tours & Events — Foundation Tokens
   Bold, youthful Middle East travel + camping + events platform.
   Two campaign-car colors anchor the system: Electric Lavender + Safari Pistachio.
   ========================================================================= */

/* ---------- Webfont imports moved to <link> tags in src/app/layout.tsx ----- */

:root {
  /* ===================== CORE BRAND PALETTE ============================== */
  /* The two campaign cars */
  --by-purple:            #B970D0;   /* Electric Lavender — campaigns, CTAs, energy */
  --by-purple-hi:         #E59CF4;   /* Purple highlight */
  --by-green:             #AFB171;   /* Safari Pistachio — travel, camping, calm */
  --by-green-hi:          #E1E4A6;   /* Green highlight */

  /* Premium contrast + warm neutrals */
  --by-ink:               #151515;   /* Asphalt black — premium contrast */
  --by-sand:              #F6F1E8;   /* Warm sand — primary background */
  --by-beige:             #D5BB97;   /* Urban beige — accent */

  /* ===================== PURPLE SCALE (campaign) ========================= */
  --purple-50:            #FBF1FE;
  --purple-100:           #F6E0FB;
  --purple-200:           #ECC1F6;
  --purple-300:           #E59CF4;   /* = highlight */
  --purple-400:           #D389E2;
  --purple-500:           #B970D0;   /* = primary purple */
  --purple-600:           #9D55B4;
  --purple-700:           #7B4090;
  --purple-800:           #57306A;
  --purple-900:           #361F44;

  /* ===================== GREEN SCALE (safari) ============================ */
  --green-50:             #F7F8E8;
  --green-100:            #EFF1CF;
  --green-200:            #E1E4A6;   /* = highlight */
  --green-300:            #CCD089;
  --green-400:            #BCBE7E;
  --green-500:            #AFB171;   /* = primary green */
  --green-600:            #8E905B;
  --green-700:            #6C6E45;
  --green-800:            #4A4B30;
  --green-900:            #2A2B1B;

  /* ===================== NEUTRAL / SAND SCALE ============================ */
  --sand-50:              #FBF8F2;
  --sand-100:             #F6F1E8;   /* = warm sand bg */
  --sand-200:             #ECE3D2;
  --sand-300:             #D5BB97;   /* = urban beige */
  --sand-400:             #B59A77;
  --sand-500:             #8B7559;
  --sand-600:             #645541;
  --sand-700:             #43392C;
  --sand-800:             #2A241C;
  --sand-900:             #151515;   /* = ink */

  /* ===================== SEMANTIC (status) =============================== */
  --success:              #4F8A5A;
  --success-bg:           #E3F0E5;
  --warning:              #D98E2B;
  --warning-bg:           #FBEDD4;
  --error:                #C8423C;
  --error-bg:             #F8DCDA;
  --info:                 #4A6FB5;
  --info-bg:              #DDE6F5;

  /* ===================== LIGHT-MODE SEMANTIC ============================= */
  --bg:                   var(--sand-100);          /* page */
  --bg-elev:              #FFFFFF;                  /* cards */
  --bg-sunken:            #EDE5D3;                  /* wells, inputs */
  --bg-ink:               var(--by-ink);            /* inverted sections */

  --fg:                   var(--by-ink);            /* primary text */
  --fg-muted:             #4A4034;                  /* secondary text */
  --fg-subtle:            #7A6E5C;                  /* tertiary text */
  --fg-on-ink:            #F6F1E8;                  /* text on dark */
  --fg-on-purple:         #FFFFFF;
  --fg-on-green:          var(--by-ink);

  --border:               #E2D7C2;                  /* hairlines */
  --border-strong:        #C9B89A;
  --border-ink:           rgba(21,21,21,0.12);

  /* CTA-specific */
  --cta-bg:               var(--by-purple);
  --cta-bg-hover:         var(--purple-600);
  --cta-bg-press:         var(--purple-700);
  --cta-fg:               #FFFFFF;

  --cta-alt-bg:           var(--by-green);
  --cta-alt-bg-hover:     var(--green-600);
  --cta-alt-fg:           var(--by-ink);

  /* ===================== GRADIENTS ======================================= */
  --grad-campaign:        linear-gradient(135deg, #E59CF4 0%, #B970D0 55%, #7B4090 100%);
  --grad-safari:          linear-gradient(135deg, #E1E4A6 0%, #AFB171 55%, #6C6E45 100%);
  --grad-dunes:           linear-gradient(180deg, #F6F1E8 0%, #D5BB97 100%);
  --grad-dusk:            linear-gradient(135deg, #B970D0 0%, #AFB171 100%);   /* the two cars meeting */
  --grad-night:           linear-gradient(180deg, #361F44 0%, #151515 100%);
  --grad-poster:          linear-gradient(160deg, #151515 0%, #361F44 60%, #B970D0 100%);

  /* ===================== RADII =========================================== */
  --r-xs:                 4px;
  --r-sm:                 8px;
  --r-md:                 14px;
  --r-lg:                 22px;
  --r-xl:                 32px;
  --r-pill:               999px;
  --r-card:               20px;     /* default card */
  --r-card-lg:            28px;     /* hero card */

  /* ===================== SPACING (4pt grid) ============================== */
  --s-0:                  0;
  --s-1:                  4px;
  --s-2:                  8px;
  --s-3:                  12px;
  --s-4:                  16px;
  --s-5:                  20px;
  --s-6:                  24px;
  --s-8:                  32px;
  --s-10:                 40px;
  --s-12:                 48px;
  --s-16:                 64px;
  --s-20:                 80px;
  --s-24:                 96px;
  --s-32:                 128px;

  /* ===================== SHADOWS / ELEVATION ============================= */
  --sh-xs:                0 1px 2px rgba(21,21,21,0.06);
  --sh-sm:                0 2px 6px rgba(21,21,21,0.08);
  --sh-md:                0 8px 20px -6px rgba(21,21,21,0.14);
  --sh-lg:                0 18px 40px -12px rgba(21,21,21,0.22);
  --sh-xl:                0 28px 64px -16px rgba(21,21,21,0.28);
  --sh-purple:            0 14px 40px -10px rgba(185,112,208,0.55);
  --sh-green:             0 14px 40px -10px rgba(175,177,113,0.55);
  --sh-inset:             inset 0 0 0 1px rgba(21,21,21,0.06);
  --sh-press:             inset 0 2px 0 rgba(21,21,21,0.18);

  /* ===================== MOTION ========================================== */
  --ease-out-quart:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-back:     cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-rev:             cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:               140ms;
  --t-base:               220ms;
  --t-slow:               420ms;

  /* ===================== TYPE FAMILIES =================================== */
  --font-display:         'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-sans:            'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:            'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-ar-display:      'Cairo', 'Tajawal', system-ui, sans-serif;
  --font-ar-sans:         'Tajawal', 'Cairo', system-ui, sans-serif;

  /* ===================== TYPE SCALE ====================================== */
  /* English / LTR */
  --t-hero:               clamp(56px, 9vw, 132px);   /* poster headlines */
  --t-display:            clamp(40px, 6vw, 88px);
  --t-h1:                 clamp(32px, 4.2vw, 56px);
  --t-h2:                 clamp(26px, 3vw, 40px);
  --t-h3:                 22px;
  --t-h4:                 18px;
  --t-body:               16px;
  --t-body-lg:            18px;
  --t-small:              14px;
  --t-xs:                 12px;

  /* Tracking */
  --tr-tight:             -0.025em;
  --tr-snug:              -0.012em;
  --tr-base:              0;
  --tr-wide:              0.04em;
  --tr-wider:             0.12em;       /* eyebrow caps */
}

/* ============================ DARK MODE ================================== */
[data-theme="dark"], .by-dark {
  --bg:                   #0E0D0C;
  --bg-elev:              #1B1916;
  --bg-sunken:            #100F0D;
  --bg-ink:               #000000;

  --fg:                   #F6F1E8;
  --fg-muted:             #C9BFAE;
  --fg-subtle:            #8B8174;
  --fg-on-ink:            #F6F1E8;

  --border:               rgba(246,241,232,0.10);
  --border-strong:        rgba(246,241,232,0.22);

  --sh-sm:                0 2px 6px rgba(0,0,0,0.55);
  --sh-md:                0 10px 24px -6px rgba(0,0,0,0.6);
  --sh-lg:                0 22px 48px -12px rgba(0,0,0,0.7);
}

/* ============================ BASE TYPE STYLES =========================== */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: var(--tr-tight);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: var(--tr-tight);
}
.t-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 700; line-height: 1.05; letter-spacing: var(--tr-snug); }
.t-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; line-height: 1.1;  letter-spacing: var(--tr-snug); }
.t-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.t-h4 { font-family: var(--font-sans);    font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }

.t-body    { font-family: var(--font-sans); font-size: var(--t-body);    line-height: 1.55; font-weight: 400; }
.t-body-lg { font-family: var(--font-sans); font-size: var(--t-body-lg); line-height: 1.55; font-weight: 400; }
.t-small   { font-family: var(--font-sans); font-size: var(--t-small);   line-height: 1.5;  font-weight: 400; }
.t-xs      { font-family: var(--font-sans); font-size: var(--t-xs);      line-height: 1.4;  font-weight: 500; }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}

.t-mono { font-family: var(--font-mono); }

/* Arabic / RTL */
[dir="rtl"] .t-hero,
[dir="rtl"] .t-display,
[dir="rtl"] .t-h1,
[dir="rtl"] .t-h2,
[dir="rtl"] .t-h3 { font-family: var(--font-ar-display); letter-spacing: 0; line-height: 1.15; }
[dir="rtl"] .t-h4,
[dir="rtl"] .t-body,
[dir="rtl"] .t-body-lg,
[dir="rtl"] .t-small,
[dir="rtl"] .t-xs,
[dir="rtl"] .t-eyebrow { font-family: var(--font-ar-sans); letter-spacing: 0; }

.ar-display { font-family: var(--font-ar-display); font-weight: 800; line-height: 1.15; }
.ar-body    { font-family: var(--font-ar-sans);    font-weight: 400; line-height: 1.7;  }

/* ============================ BASE PAGE ================================== */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* Utility background patches */
.bg-sand    { background: var(--sand-100); color: var(--by-ink); }
.bg-ink     { background: var(--by-ink);   color: var(--fg-on-ink); }
.bg-purple  { background: var(--by-purple);color: #fff; }
.bg-green   { background: var(--by-green); color: var(--by-ink); }
.bg-beige   { background: var(--by-beige); color: var(--by-ink); }
.bg-dunes   { background: var(--grad-dunes); }
.bg-dusk    { background: var(--grad-dusk); color: #fff; }
.bg-night   { background: var(--grad-night); color: var(--fg-on-ink); }
.bg-poster  { background: var(--grad-poster); color: #fff; }