/*
 * Al Asel brand layer — heritage green + warm gold, Marcellus/Jost display type with
 * Noto Kufi/Sans Arabic equivalents, layered on top of the compiled Cartzilla theme
 * (theme.css, --cz-primary: #0a382e). Values below are lifted 1:1 from the client-supplied
 * design reference (z_templates/alasel-frontend/assets/css/tokens.css) so the site matches
 * that mockup's palette, type and spacing. Consumed by wwwroot/css/site.css utilities:
 * .accent-divider, .card-hover-lift, .section-eyebrow, product badges, the home-section
 * rhythm/tint system, etc. See ../../../wwwroot/css/brand.css for the convention and
 * store-site/clients/README.md for how this file gets applied.
 */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* Gold accent — dividers, heading accents, badges, buttons, borders. */
  --site-accent: #CDA84E;
  --site-accent-soft: #E7CE8E;

  /* Reference palette (not all consumed by Cartzilla utilities directly, but available
     for inline home-builder section colors — e.g. HomeSection.BgHex for a plum band). */
  --alasel-green-900: #0A382E;
  --alasel-plum-900: #321037;
  --alasel-gold-300: #E7CE8E;
  --alasel-gold-400: #CDA84E;
  --alasel-paper: #FAF6EE;
  --alasel-paper-alt: #F3ECDC;
  --alasel-ink: #211C16;
  --alasel-line: #E2D8C3;

  /* Warm ivory background (overrides Cartzilla's default white) + matching card/border tones. */
  --bs-body-bg: var(--alasel-paper);
  --bs-tertiary-bg: var(--alasel-paper-alt);
  --bs-border-color: var(--alasel-line);
  --bs-body-color: var(--alasel-ink);

  /* Wider, editorial section rhythm than the brand-neutral default. */
  --section-pad: clamp(2.5rem, 5vw, 4.5rem);
  --section-pad-loose: clamp(3.75rem, 8vw, 6.5rem);
}

[data-bs-theme='dark'] {
  --bs-body-bg: var(--alasel-green-900);
  --bs-tertiary-bg: #12463A;
  --bs-border-color: rgba(255, 255, 255, .14);
}

/* Display font (headings): Marcellus, Noto Kufi Arabic for Arabic script. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Marcellus', 'Noto Kufi Arabic', serif;
  letter-spacing: -.01em;
}

html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3,
html[lang='ar'] h4, html[lang='ar'] h5, html[lang='ar'] h6,
html[lang='ar'] .display-1, html[lang='ar'] .display-2, html[lang='ar'] .display-3,
html[lang='ar'] .display-4, html[lang='ar'] .display-5, html[lang='ar'] .display-6 {
  font-family: 'Noto Kufi Arabic', 'Marcellus', serif;
  font-weight: 600;
  letter-spacing: normal;
}

/* Body/UI font: Jost, Noto Sans Arabic for Arabic script. */
body {
  font-family: 'Jost', 'Noto Sans Arabic', -apple-system, "Segoe UI", sans-serif;
}

html[lang='ar'] body {
  font-family: 'Noto Sans Arabic', 'Jost', -apple-system, "Segoe UI", sans-serif;
}

/* Buttons — gold primary on the heritage green, generous pill radius. */
.btn-primary {
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-color: var(--alasel-green-900);
  --bs-btn-hover-bg: var(--site-accent-soft);
  --bs-btn-hover-border-color: var(--site-accent-soft);
  --bs-btn-hover-color: var(--alasel-green-900);
  --bs-btn-active-bg: var(--site-accent-soft);
  --bs-btn-active-border-color: var(--site-accent-soft);
  --bs-btn-active-color: var(--alasel-green-900);
  font-weight: 600;
}