/* ============================================================
   Family Marhooms Directory — Design Tokens
   Navy + gold Islamic memorial identity, carried from the
   original book cover compiled by Yunus Ahmed Rawat & Family.
   ============================================================ */

:root {
  /* --- Palette --------------------------------------------------- */
  --color-navy:        #2a3950;  /* cover ground */
  --color-navy-deep:   #1f2b3e;  /* deeper panels, footer */
  --color-navy-line:   #3a4c67;  /* hairlines on navy */

  --color-gold:        #c9a24a;  /* primary gold */
  --color-gold-soft:   #dcc07f;  /* light gold / highlights */
  --color-gold-deep:   #a5813690; /* muted gold for rules */

  --color-surface:     #f7f4ec;  /* warm paper for reading pages */
  --color-surface-2:   #fffdf8;  /* raised cards */
  --color-surface-line:#e3dccb;  /* borders on paper */

  --color-text:        #1c2431;  /* ink on paper */
  --color-text-muted:  #5c6472;  /* secondary ink */
  --color-on-navy:     #eef2f8;  /* text on navy */
  --color-on-navy-dim: #aab6c9;  /* secondary text on navy */

  --color-focus:       #7fb0ff;  /* visible focus ring */

  /* --- Typography ------------------------------------------------ */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, "Times New Roman", serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);

  --leading-tight: 1.15;
  --leading-body:  1.6;
  --tracking-caps: 0.14em;

  /* --- Spacing --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --measure: 68ch;                 /* readable line length */
  --radius: 10px;
  --radius-lg: 18px;

  /* --- Depth ----------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(28, 36, 49, 0.06),
                 0 6px 20px rgba(28, 36, 49, 0.08);
  --shadow-lift: 0 4px 10px rgba(28, 36, 49, 0.10),
                 0 16px 40px rgba(28, 36, 49, 0.14);

  /* --- Motion ---------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}