/* ============================================================
   AlHoot × Hulul — design tokens (SPEC §3, ramps from design.md §3)
   Tokens only — no selectors beyond :root.
   ============================================================ */

:root {
  /* ---- Teal — primary ---- */
  --teal-100: #B0E5EA;
  --teal-200: #8ECFD5;
  --teal-300: #60B8C1;
  --teal-500: #009DAC;
  --teal-700: #004E56;

  /* ---- Navy — primary dark ---- */
  --navy-100: #BEBAD2;
  --navy-300: #908CA5;
  --navy-500: #625D78;
  --navy-700: #2F294B;
  --navy-900: #181526;

  /* ---- Sand — warm neutral ---- */
  --sand-100: #DDD8C4;
  --sand-300: #B1AD9D;
  --sand-500: #858276;
  --sand-700: #58564E;
  --sand-900: #2C2B27;

  /* ---- Semantic aliases (SPEC §3) ---- */
  --bg:            var(--navy-900);
  --bg-raised:     var(--navy-700);
  --ink:           #FFFFFF;
  --ink-soft:      var(--sand-100);   /* warm body text on dark — never grey */
  --ink-faint:     var(--navy-100);
  --accent:        var(--teal-500);   /* graphic color + large display type only */
  --accent-bright: var(--teal-300);
  --accent-deep:   var(--teal-700);

  /* ---- Type scale (SPEC §3) ---- */
  --font-stack: 'Kufam', 'Segoe UI', Tahoma, Arial, sans-serif;
  --text-display: clamp(2.8rem, 8vw, 7rem);
  --lh-display:   1.1;
  --text-title:   clamp(2rem, 4.5vw, 3.5rem);
  --lh-title:     1.2;
  --text-lead:    clamp(1.25rem, 2vw, 1.6rem);
  --lh-lead:      1.6;
  --text-body:    clamp(1rem, 1.3vw, 1.15rem);
  --lh-body:      1.7;
  --text-caption: 0.875rem;
  --lh-caption:   1.5;
  --track-display: 0.04em;  /* Latin display lines only — never Arabic */

  /* ---- Motion (SPEC §5) ---- */
  --ease-water: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-enter: 1s;
  --dur-quick: 0.3s;

  /* ---- Shape & space ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --slide-pad-block:  clamp(4rem, 10svh, 7rem);
  --slide-pad-inline: clamp(1.25rem, 6vw, 6rem);
  --content-max: 68rem;
  --prose-max: 46rem;

  /* ---- Fixed chrome ---- */
  --chrome-pad: clamp(1rem, 2.5vw, 2rem);
  --z-backdrop: 0;
  --z-slides: 1;
  --z-chrome: 10;
}
