/* ============================================================================
   Design tokens — Quran Tracking landing page
   Palette is the APP's own system (src/theme/variables.scss). Radiantable
   indigo/gold appear ONLY in the endorsement lockup.
   ========================================================================== */

:root {
  /* --- App palette: light (the hero register) --- */
  --c-app-bg: #e6e9df;      /* soft sage behind the page */
  --c-paper: #f2f4ec;       /* the page / card surface */
  --c-surface: #f7f8f2;     /* chrome, raised */
  --c-ink: #1d2a23;         /* primary text */
  --c-ink-soft: #4d5d54;    /* secondary */
  --c-ink-faint: #6f7d74;   /* tertiary / hints */
  --c-rule: #d6dccf;        /* hairlines */
  --c-green: #1f6b54;       /* primary accent */
  --c-green-deep: #17574a;  /* green text on paper */
  --c-green-wash: #e6f0ea;  /* soft green fill */
  --c-gold: #c4a35b;        /* ornament / radiance */
  --c-gold-deep: #9c7e3f;
  --c-gold-ink: #7a6228;    /* AA gold for text/icons */
  --c-gold-wash: #efe7d2;
  --c-on-green: #ffffff;

  /* --- Night register (page top / hero pre-dawn) --- */
  --c-night-bg: #101915;
  --c-night-paper: #15211c;
  --c-night-surface: #1b2823;
  --c-night-ink: #e9e4d6;
  --c-night-ink-soft: #a8a492;
  --c-night-rule: #2b3a33;
  --c-night-green: #3f9c80;
  --c-night-gold: #ccae67;

  /* --- Radiantable endorsement ONLY --- */
  --c-rad-indigo: #3f51e0;
  --c-rad-gold: #f2b33d;

  /* --- Type families --- */
  --f-head: "El Messiri", "Segoe UI", system-ui, serif;
  --f-body: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --f-latin: "Figtree", "Segoe UI", system-ui, sans-serif;

  /* --- Fluid type scale --- */
  --step--1: clamp(0.83rem, 0.80rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.18rem);
  --step-1:  clamp(1.28rem, 1.10rem + 0.90vw, 1.75rem);
  --step-2:  clamp(1.80rem, 1.30rem + 2.10vw, 2.90rem);
  --step-3:  clamp(2.40rem, 1.55rem + 3.90vw, 4.80rem);

  /* --- Space, radius, motion --- */
  --sp: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --sp-lg: clamp(3.5rem, 2rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(29, 42, 35, 0.05), 0 18px 40px -24px rgba(29, 42, 35, 0.35);
  --shadow-float: 0 30px 70px -30px rgba(29, 42, 35, 0.55);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1180px;

  /* current-theme aliases (default = light) */
  --bg: var(--c-app-bg);
  --ink: var(--c-ink);
}

/* Night section override — applied to the hero until it scrolls away. */
.is-night {
  --c-app-bg: var(--c-night-bg);
  --c-paper: var(--c-night-paper);
  --c-surface: var(--c-night-surface);
  --c-ink: var(--c-night-ink);
  --c-ink-soft: var(--c-night-ink-soft);
  --c-ink-faint: var(--c-night-ink-soft);
  --c-rule: var(--c-night-rule);
  --c-green: var(--c-night-green);
  --c-green-deep: #6cc3a6;
  --c-gold: var(--c-night-gold);
  --c-gold-ink: #d8bd78;
}