/**
 * Design tokens — aljadawel-2026
 *
 * Values are a CENSUS of the literals actually used in the approved prototype
 * (docs/new-design-theme/store.dc.html), not a transcription of old/tokens/*.css.
 * The prototype is a React app with zero CSS custom properties, so there was no
 * token layer to copy; usage counts are recorded in docs/design-inventory.md.
 *
 * Where the old spec and the prototype disagree, the prototype wins:
 *   - --lh-display: 1.65      spec'd, used 0 times  -> real value is 1.35 / 1.5
 *   - cubic-bezier easing     spec'd, used 0 times  -> real value is plain ease-out
 *   - 4/8/12/16... spacing    spec'd, ~half the real gaps fall outside it
 *
 * Everything here is written with LOGICAL properties so one stylesheet serves
 * Arabic (RTL) and English (LTR) with no flipping library and no rtl.css.
 */

:root {
	/* ---- Color -------------------------------------------------------------
	 * Counts are occurrences in store.dc.html. Navy carries 30-40% of the surface.
	 */
	--jd-navy:            #18295E; /* 362 - primary surface, headings, buttons */
	--jd-navy-700:        #1F3370; /*  31 - navy hover */
	--jd-hairline:        #DBCFB8; /* 296 - 1px borders, used INSTEAD of shadows */
	--jd-hairline-strong: #C9B994; /*       hover state for card borders */
	--jd-text-secondary:  #566078; /* 145 */
	--jd-surface:         #FCF9F1; /* 134 - cards (never pure white) */
	--jd-ink:             #1C2433; /* 116 - body text (never pure black) */
	--jd-text-muted:      #6E7689; /* 100 - NOT #8A90A2; that value is unused here */
	--jd-paper:           #F6F1E6; /*  41 - page background */
	--jd-paper-deep:      #EDE4D0; /*  40 - second-tier divider */
	--jd-emerald:         #1B5E43; /*  38 - digital / instant-delivery identity ONLY */
	--jd-emerald-soft:    #8FD0AF; /*   1 - digital tag text on navy */
	--jd-pulse:           #5FA98A; /*   2 - live-activity dot */
	--jd-brass:           #96793F; /*  27 - gilding on paper; keep under 3% of a screen */
	--jd-brass-on-navy:   #B89254; /*   4 - ONLY where gold sits on navy (contrast tint) */
	--jd-danger:          #8C3B2E; /*   5 */
	--jd-on-navy:         #FFFFFF; /*  74 */

	/* ---- Typography --------------------------------------------------------
	 * Four families, four weights in use: 600 (116x), 500 (69x), 700 (56x), 400 (2x).
	 */
	--jd-font-display: 'Amiri', 'Times New Roman', serif;
	--jd-font-ui:      'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
	--jd-font-latin:   'EB Garamond', 'Times New Roman', serif;
	--jd-font-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

	--jd-fs-hero:    3rem;    /* 48px desktop; 38px tablet, 30px mobile below */
	--jd-fs-display: 2rem;    /* 32px - page H1 */
	--jd-fs-title:   1.375rem;/* 22px */
	--jd-fs-lg:      1.125rem;/* 18px */
	--jd-fs-base:    1rem;    /* 16px */
	--jd-fs-sm:      .875rem; /* 14px */
	--jd-fs-xs:      .8125rem;/* 13px */
	--jd-fs-2xs:     .75rem;  /* 12px - biblio lines, tags */

	--jd-lh-hero:  1.35; /* measured; the spec's 1.65 is not implemented anywhere */
	--jd-lh-title: 1.5;
	--jd-lh-body:  1.7;

	--jd-track-biblio: .08em; /* publisher - ISBN rows */
	--jd-track-label:  .14em; /* section labels */
	--jd-track-wide:   .16em; /* used almost as often as --jd-track-label */
	--jd-track-code:   .3em;  /* activation codes */

	/* ---- Shape & depth -----------------------------------------------------
	 * Hairline borders replace shadows. One shadow exists and it is nearly invisible.
	 */
	--jd-radius-card: 8px;
	--jd-radius-btn:  6px;
	--jd-radius-tag:  4px;
	--jd-radius-xs:   3px;
	--jd-border:      1px solid var(--jd-hairline);
	--jd-shadow-card: 0 1px 2px rgb(24 41 94 / .06);

	/* ---- Spacing -----------------------------------------------------------
	 * Deliberately NOT a tidy scale. The prototype was hand-tuned per component and
	 * roughly half its real gap values fall outside 4/8/12/16/24/32. Snapping them
	 * to a scale would break pixel parity, so the measured steps are exposed as-is.
	 */
	--jd-space-1:  2px;
	--jd-space-2:  4px;
	--jd-space-3:  6px;
	--jd-space-4:  8px;
	--jd-space-5:  10px;
	--jd-space-6:  12px;
	--jd-space-7:  14px;
	--jd-space-8:  16px;
	--jd-space-9:  18px;
	--jd-space-10: 20px;
	--jd-space-11: 22px;
	--jd-space-12: 24px;
	--jd-space-13: 26px;
	--jd-space-14: 28px;
	--jd-space-16: 32px;
	--jd-space-20: 44px;
	--jd-space-24: 64px;

	/* ---- Layout ------------------------------------------------------------ */
	--jd-container:      1200px;
	--jd-container-wide: 1320px;
	--jd-gutter:         var(--jd-space-10);

	/* ---- Motion ------------------------------------------------------------
	 * Plain ease-out (156 uses). The spec's cubic-bezier(.25,.6,.3,1) is used 0 times.
	 */
	--jd-dur:  .18s;
	--jd-ease: ease-out;
	--jd-transition: var(--jd-dur) var(--jd-ease);

	/* ---- Marquee timings (measured from the prototype) --------------------- */
	--jd-marquee-announce: 36s;
	--jd-marquee-chips:    38s;
}

/* Responsive hero size. The prototype sets these in JS; here they are media queries
   so the value is declarative and survives with JS disabled. */
@media (max-width: 1080px) { :root { --jd-fs-hero: 2.375rem; } } /* 38px */
@media (max-width: 768px)  { :root { --jd-fs-hero: 1.875rem; } } /* 30px */

/**
 * Reduced motion.
 *
 * The prototype honours this in both CSS and JS, so the reference screenshots were
 * captured with it on. Matching it here is a parity requirement, not just an a11y nicety.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}