/* =========================================================================
   BerryLux v2 — Modern Saudi Professional
   Palette: Warm cream / Deep palm green / Bronze (Vision 2030 register)
   ========================================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700,400&f[]=cabinet-grotesk@500,700,800&display=swap');

:root {
  /* Type */
  --f-display: "Cabinet Grotesk", "IBM Plex Sans Arabic", "General Sans", system-ui, sans-serif;
  --f-body: "General Sans", "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Scale — tighter, more modern */
  --step--2: clamp(0.70rem, 0.66rem + 0.18vw, 0.80rem);
  --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.90rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.08rem, 1.03rem + 0.28vw, 1.20rem);
  --step-2:  clamp(1.22rem, 1.15rem + 0.38vw, 1.40rem);
  --step-3:  clamp(1.42rem, 1.32rem + 0.52vw, 1.68rem);
  --step-4:  clamp(1.68rem, 1.52rem + 0.76vw, 2.05rem);
  --step-5:  clamp(2.00rem, 1.76rem + 1.10vw, 2.50rem);
  --step-6:  clamp(2.40rem, 2.02rem + 1.72vw, 3.20rem);
  --step-7:  clamp(2.90rem, 2.30rem + 2.60vw, 4.20rem);
  --step-8:  clamp(3.50rem, 2.60rem + 3.80vw, 5.40rem);
  --step-9:  clamp(4.20rem, 2.80rem + 5.80vw, 7.00rem);
  --step-10: clamp(5.20rem, 3.00rem + 9.00vw, 10.00rem);

  /* Spacing */
  --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: 140px; --s-11: 180px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 480ms;
  --dur-slow: 1200ms;

  /* Layout */
  --max-w: 1440px;
  --gutter: clamp(24px, 5vw, 80px);
}

/* ---------- Palette B: Diriyah (default) ---------- */
:root,
:root[data-palette="diriyah"],
:root[data-palette="bone"] {
  --c-bg: #FAF7F0;
  --c-bg-2: #F2EDE0;
  --c-bg-3: #E8E1CF;
  --c-surface: #FFFFFF;
  --c-fg: #0F1F17;
  --c-fg-2: #2B3B30;
  --c-fg-3: #5C6960;
  --c-fg-4: #8A9287;
  --c-rule: #0F1F1714;
  --c-rule-strong: #0F1F1730;
  --c-brand: #1F3D2B;
  --c-brand-2: #2D5A3E;
  --c-brand-soft: #1F3D2B0F;
  --c-accent: #B89968;
  --c-accent-2: #D4B485;
  --c-accent-soft: #B8996818;
  --c-positive: #2D5A3E;
  --c-media-1: linear-gradient(135deg, #2D5A3E 0%, #1F3D2B 100%);
  --c-media-2: linear-gradient(135deg, #D4B485 0%, #B89968 100%);
  --c-media-3: linear-gradient(135deg, #3E5A48 0%, #1F3D2B 60%, #0F1F17 100%);
}

/* ---------- Palette A: Navy institutional ---------- */
:root[data-palette="navy"] {
  --c-bg: #F7F5F0;
  --c-bg-2: #EFEDE6;
  --c-bg-3: #E4E1D8;
  --c-surface: #FFFFFF;
  --c-fg: #0A1A2E;
  --c-fg-2: #1E3A5F;
  --c-fg-3: #5A6472;
  --c-fg-4: #8A8F99;
  --c-rule: #0A1A2E14;
  --c-rule-strong: #0A1A2E30;
  --c-brand: #0A2540;
  --c-brand-2: #133C63;
  --c-brand-soft: #0A25400F;
  --c-accent: #C9A961;
  --c-accent-2: #E0C485;
  --c-accent-soft: #C9A96118;
  --c-positive: #2D5A3E;
  --c-media-1: linear-gradient(135deg, #133C63 0%, #0A2540 100%);
  --c-media-2: linear-gradient(135deg, #E0C485 0%, #C9A961 100%);
  --c-media-3: linear-gradient(135deg, #1E3A5F 0%, #0A2540 60%, #050F1C 100%);
}

/* ---------- Palette C: Desert ---------- */
:root[data-palette="desert"] {
  --c-bg: #F5F1E8;
  --c-bg-2: #EDE6D4;
  --c-bg-3: #E0D6BE;
  --c-surface: #FFFDF8;
  --c-fg: #2B1810;
  --c-fg-2: #4A2E1E;
  --c-fg-3: #7A5A42;
  --c-fg-4: #9E826A;
  --c-rule: #2B181014;
  --c-rule-strong: #2B181030;
  --c-brand: #2B1810;
  --c-brand-2: #4A2E1E;
  --c-brand-soft: #2B18100F;
  --c-accent: #D4A574;
  --c-accent-2: #E8BE8B;
  --c-accent-soft: #D4A57418;
  --c-positive: #5A6B4E;
  --c-media-1: linear-gradient(135deg, #4A2E1E 0%, #2B1810 100%);
  --c-media-2: linear-gradient(135deg, #E8BE8B 0%, #D4A574 100%);
  --c-media-3: linear-gradient(135deg, #7A5A42 0%, #2B1810 100%);
}

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--step-0);
  line-height: 1.55;
  transition: background var(--dur) var(--ease-in-out), color var(--dur) var(--ease-in-out);
}
html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "General Sans", sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] .f-display {
  font-family: "IBM Plex Sans Arabic", "Cabinet Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Typography */
.f-display { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.02; }
.f-mono { font-family: var(--f-mono); letter-spacing: 0; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-3);
  font-weight: 500;
}
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--c-fg);
}
h1 { font-size: var(--step-9); }
h2 { font-size: var(--step-7); }
h3 { font-size: var(--step-5); }
h4 { font-size: var(--step-3); }
p { margin: 0; color: var(--c-fg-2); }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Solid dividers (not hairline) */
.div { height: 1px; background: var(--c-rule-strong); width: 100%; }
.div-brand { height: 2px; background: var(--c-brand); width: 64px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--c-rule-strong); }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: var(--c-brand); color: var(--c-bg); }

/* ---------- Media blocks (replacing striped placeholders) ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-brand);
  background-image: var(--c-media-1);
}
.media-bronze { background-image: var(--c-media-2); }
.media-deep   { background-image: var(--c-media-3); }
.media-cream  { background: var(--c-bg-2); }

/* Subtle grid texture for media */
.media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, #ffffff14 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, #00000026 0%, transparent 60%);
  pointer-events: none;
}
.media::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, #ffffff06 1px, transparent 1px),
    linear-gradient(0deg, #ffffff06 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.media-cream::before,
.media-cream::after { opacity: 0.25; }

.media-label {
  position: absolute;
  left: 20px; bottom: 20px; right: 20px;
  display: flex; justify-content: space-between; align-items: end;
  gap: 12px;
  color: #ffffffB3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}
.media-cream .media-label { color: var(--c-fg-3); }
.media-num {
  font-family: var(--f-display);
  font-size: 11px;
  color: #ffffffB3;
  border: 1px solid #ffffff40;
  padding: 4px 8px;
}
.media-cream .media-num { color: var(--c-fg-2); border-color: var(--c-rule-strong); }

/* Decorative mark on media — abstract geometric */
.media-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: #ffffff1A;
}
.media-cream .media-mark { color: var(--c-fg-3); opacity: 0.15; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--c-fg);
  color: var(--c-fg);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-in-out);
  border-radius: 2px;
  white-space: nowrap;
}
.btn:hover { background: var(--c-fg); color: var(--c-bg); }
.btn-primary { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.btn-primary:hover { background: var(--c-brand-2); border-color: var(--c-brand-2); }
.btn-accent { background: var(--c-accent); color: var(--c-brand); border-color: var(--c-accent); }
.btn-accent:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.btn-ghost { border-color: var(--c-rule-strong); color: var(--c-fg-2); }
.btn-ghost:hover { border-color: var(--c-fg); background: var(--c-bg-2); color: var(--c-fg); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-in-out);
}
.btn:hover .arrow { transform: translateX(6px); }
html[dir="rtl"] .btn:hover .arrow { transform: translateX(-6px) rotate(180deg); }
html[dir="rtl"] .btn .arrow { transform: rotate(180deg); }

/* Link underline */
.link-underline {
  position: relative;
  padding-bottom: 3px;
  transition: color var(--dur-fast);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform var(--dur) var(--ease-out-expo);
}
.link-underline:hover { color: var(--c-brand); }
.link-underline:hover::after { transform: scaleX(0.4); }

/* Sections */
.section { padding: var(--s-10) 0; }
.section-tight { padding: var(--s-9) 0; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}
.reveal.in { opacity: 1; transform: none; }

/* Tweaks */
.tweaks {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-rule-strong);
  padding: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  z-index: 2000;
  min-width: 260px;
  display: none;
  box-shadow: 0 20px 60px #0000001a;
  border-radius: 2px;
}
.tweaks.open { display: block; }
.tweaks h5 {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-fg-3);
  margin: 0 0 14px 0;
}
.tweaks .row { display: grid; gap: 6px; margin-bottom: 14px; }
.tweaks button {
  padding: 12px 14px;
  border: 1px solid var(--c-rule-strong);
  background: transparent;
  color: var(--c-fg-2);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; text-align: start;
  transition: all 160ms;
  display: flex; align-items: center; gap: 10px;
}
.tweaks button .sw {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
}
.tweaks button.active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.tweaks button:hover:not(.active) { border-color: var(--c-fg); color: var(--c-fg); }
html[dir="rtl"] .tweaks { right: auto; left: 20px; }

/* Utility */
.hidden { display: none !important; }