/* Hajjnoor marketing site — design tokens (Islamic theme) */

/* Fonts self-hosted via static/vendor/marketing-fonts.css (loaded in base_marketing.html). */

/* Global box-sizing reset — prevents width:100% buttons from overflowing
   their containers (e.g. pricing card CTAs). Padding/border count inside
   the declared width. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Brand */
  --brand:        #5f7e78;
  --brand-dark:   #3d524e;
  --accent:        #e3a53e;
  --accent-dark:   #8a6a1f;
  --accent-light:  #fbf0d9;
  --sand:         #d4be83;
  --mint:         #b8d6d0;
  --cream:        #f1ead7;
  --ink:          #1f2a26;
  --ink-soft:     #4a5b56;
  --surface:      #ffffff;
  --surface-2:    #faf6ea;

  /* Radii + shadows */
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  999px;
  --shadow-sm:     0 2px 6px rgba(31,42,38,.08);
  --shadow:        0 8px 24px rgba(31,42,38,.10);
  --shadow-md:     0 10px 30px rgba(31,42,38,.12);
  --shadow-lg:     0 24px 60px rgba(31,42,38,.18);
  --shadow-accent: 0 4px 14px rgba(227,165,62,.35);  /* gold CTA glow */

  /* Fluid spacing */
  --space-section: clamp(48px, 8vw, 120px);
  --space-card:    clamp(20px, 3vw, 32px);
  --space-gap:     clamp(16px, 2vw, 24px);

  /* Fonts */
  --font-display-en: 'Cormorant Garamond', 'Noto Serif Bengali', serif;
  --font-display-bn: 'Noto Serif Bengali', 'Cormorant Garamond', serif;
  --font-body-en:    'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body-bn:    'Hind Siliguri', 'DM Sans', system-ui, sans-serif;
  --font-arabic:     'Amiri', 'Noto Naskh Arabic', 'Scheherazade New', serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Semantic text utilities */
.display { font-family: var(--font-display-en); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.lead { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; }
.eyebrow { display: inline-block; color: var(--accent); font-weight: 700; font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.mono, .amount-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.amount-due { font-family: var(--font-mono); font-weight: 700; color: #b94a48; }
.quranic, .arabic { font-family: var(--font-arabic); direction: rtl; unicode-bidi: isolate; }
::selection { background: var(--accent-light, #fbf0d9); color: var(--brand-dark); }

/* Language-aware fonts */
html[lang="en"] body { font-family: var(--font-body-en); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { font-family: var(--font-display-en); letter-spacing: .2px; }
html[lang="bn"] body { font-family: var(--font-body-bn); }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { font-family: var(--font-display-bn); }
.quranic, .arabic { font-family: var(--font-arabic); direction: rtl; }

/* Fluid type */
h1 { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.15; margin: 0 0 .4em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; margin: 0 0 .5em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; margin: 0 0 .5em; }
body { font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.65; color: var(--ink); }

a { color: var(--brand); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dark); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}