/* ==========================================================================
   LAMSET NOOR STUDIO — base.css
   Design tokens, reset, themes (dark / light), typography, RTL foundations
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Jost:wght@200;300;400;500;600&family=Amiri:ital,wght@0,400;0,700;1,400&family=Tajawal:wght@200;300;400;500;700&display=swap');

/* ---------- 2. Design tokens ---------- */
:root {
  /* Gold ramp — pulled from the studio logo */
  --gold-100: #FBF0CE;
  --gold-200: #F5E2A8;
  --gold-300: #E8CC7C;
  --gold-400: #D4AF37;
  --gold-500: #BE9829;
  --gold-600: #A17E29;
  --gold-700: #8C6C1F;
  --gold-800: #6B5117;

  --gold-grad: linear-gradient(135deg, #8C6C1F 0%, #D4AF37 22%, #FBF0CE 46%, #E8CC7C 62%, #A17E29 88%);
  --gold-grad-soft: linear-gradient(120deg, rgba(212,175,55,.14), rgba(251,240,206,.05) 55%, rgba(212,175,55,.14));
  --gold-line: linear-gradient(90deg, transparent, var(--gold-400), transparent);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  --font-body: 'Jost', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-ar-display: 'Amiri', 'Cormorant Garamond', serif;
  --font-ar-body: 'Tajawal', 'Jost', system-ui, sans-serif;

  --fs-hero: clamp(2.9rem, 9vw, 7.5rem);
  --fs-h1: clamp(2.3rem, 6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 2.5vw, 2rem);
  --fs-lead: clamp(1.02rem, 1.5vw, 1.28rem);
  --fs-body: clamp(.95rem, 1.05vw, 1.04rem);
  --fs-small: .84rem;
  --fs-micro: .72rem;

  --track-wide: .34em;
  --track-mid: .16em;

  /* Space & shape */
  --gutter: clamp(1.15rem, 5vw, 4.5rem);
  --section-y: clamp(4.5rem, 11vw, 10rem);
  --maxw: 1400px;
  --maxw-narrow: 980px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --radius-pill: 999px;

  /* Motion */
  --ease-lux: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .28s;
  --t-mid: .55s;
  --t-slow: 1.05s;

  --header-h: 84px;
  --z-nav: 900;      /* floating actions, scroll progress */
  --z-menu: 950;     /* full-screen mobile menu */
  --z-header: 960;   /* above the menu so the close button stays reachable */
  --z-modal: 1000;
  --z-loader: 1100;
}

/* ---------- 3. Themes ---------- */
html[data-theme='dark'] {
  --bg: #08070A;
  --bg-alt: #0D0C11;
  --surface: #131218;
  --surface-2: #1A1822;
  --surface-3: #221F2C;
  --text: #F5F2EB;
  --text-2: rgba(245, 242, 235, .66);
  --text-3: rgba(245, 242, 235, .40);
  --line: rgba(212, 175, 55, .17);
  --line-soft: rgba(245, 242, 235, .09);
  --gold: var(--gold-400);
  --gold-text: var(--gold-300);
  /* Gradient tuned for TEXT fills. The button ramp dips too dark at its ends,
     which swallows the first glyphs on a black page, so text gets its own. */
  --gold-grad-text: linear-gradient(135deg, #C9A227 0%, #F5E2A8 32%, #FBF0CE 52%, #E8CC7C 74%, #C9A227 100%);
  --shadow-s: 0 2px 18px rgba(0, 0, 0, .5);
  --shadow-m: 0 18px 55px rgba(0, 0, 0, .62);
  --shadow-l: 0 40px 110px rgba(0, 0, 0, .75);
  --glow: 0 0 60px rgba(212, 175, 55, .22);
  --img-veil: linear-gradient(180deg, rgba(8, 7, 10, 0) 30%, rgba(8, 7, 10, .92) 100%);
  --grain-opacity: .05;
  --scheme: dark;
}

html[data-theme='light'] {
  --bg: #FCFAF6;
  --bg-alt: #F5EFE4;
  --surface: #FFFFFF;
  --surface-2: #F8F3E9;
  --surface-3: #F1E9DA;
  --text: #16120B;
  --text-2: rgba(22, 18, 11, .68);
  --text-3: rgba(22, 18, 11, .44);
  --line: rgba(140, 108, 31, .22);
  --line-soft: rgba(22, 18, 11, .10);
  --gold: var(--gold-600);
  --gold-text: var(--gold-700);
  --gold-grad-text: linear-gradient(135deg, #6B5117 0%, #A17E29 22%, #C9A227 48%, #9A7B24 74%, #6B5117 100%);
  --shadow-s: 0 2px 14px rgba(90, 70, 20, .07);
  --shadow-m: 0 18px 50px rgba(90, 70, 20, .12);
  --shadow-l: 0 40px 90px rgba(90, 70, 20, .16);
  --glow: 0 0 60px rgba(212, 175, 55, .28);
  --img-veil: linear-gradient(180deg, rgba(252, 250, 246, 0) 30%, rgba(252, 250, 246, .95) 100%);
  --grain-opacity: .028;
  --scheme: light;
}

/* ---------- 4. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: var(--scheme);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .012em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--t-mid) var(--ease-soft), color var(--t-mid) var(--ease-soft);
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }

button { cursor: pointer; }

ul, ol { list-style: none; }

/* Filters and the language engine both drive visibility through [hidden];
   several components set an explicit display, which would otherwise win. */
[hidden] { display: none !important; }

::selection { background: var(--gold-400); color: #08070A; }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-600), var(--gold-400)); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-300); }

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

/* ---------- 5. Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { color: var(--text-2); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: .96;
  font-weight: 300;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
  font-weight: 300;
  line-height: 1.82;
  max-width: 62ch;
}

.italic { font-style: italic; }

.gold-text {
  background: var(--gold-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gold-solid { color: var(--gold-text); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}

.eyebrow::before {
  content: '';
  width: clamp(22px, 4vw, 52px);
  height: 1px;
  background: var(--gold-400);
  opacity: .8;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: clamp(22px, 4vw, 52px);
  height: 1px;
  background: var(--gold-400);
  opacity: .8;
}

.text-muted { color: var(--text-3); }
.text-center { text-align: center; }
.balance { text-wrap: balance; }

/* ---------- 6. Arabic / RTL ---------- */
html[lang='ar'] body {
  font-family: var(--font-ar-body);
  line-height: 1.95;
  letter-spacing: 0;
  font-weight: 400;
}

html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3,
html[lang='ar'] h4,
html[lang='ar'] .display {
  font-family: var(--font-ar-display);
  line-height: 1.32;
  letter-spacing: 0;
  font-weight: 700;
}

html[lang='ar'] .display { font-size: clamp(2.3rem, 7vw, 5.8rem); }
html[lang='ar'] .eyebrow { letter-spacing: .06em; font-family: var(--font-ar-body); }
html[lang='ar'] .lead { line-height: 2.1; }

/* Mirror decorative-only transforms in RTL */
html[dir='rtl'] .flip-rtl { transform: scaleX(-1); }

/* ---------- 7. Global texture + progress ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 800;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: var(--gold-grad);
  z-index: var(--z-nav);
  transition: width .1s linear;
  box-shadow: 0 0 14px rgba(212, 175, 55, .7);
}

/* ---------- 8. Accessibility ---------- */
.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;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: var(--z-loader);
  background: var(--gold-400);
  color: #08070A;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  transition: top var(--t-fast);
}
.skip-link:focus { inset-block-start: 1rem; }

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