/* ==========================================================================
   REAZ 2.0 — GLOBAL VISUAL VOCABULARY  (Pass 02.0)
   --------------------------------------------------------------------------
   This file INSTALLS the new visual language. It does NOT speak it yet.

   Design decisions locked into 02.0:
   - All tokens are namespaced under `--reaz-*`. They COEXIST with each page's
     legacy `:root` variables (--accent, --paper, --ink, etc.). No legacy
     variable is reassigned here, so linking this file cannot recolour any
     existing page.
   - Every primitive is scoped under an explicit `.reaz-*` class. No bare
     element selectors (no `a`, `body`, `h1`, `:focus-visible` globally).
     Existing markup uses none of these classes, so nothing is restyled until
     a page's own approved pass opts into them.
   - No imagery, no Urdu glyphs, no copy. Decorative-object primitives are
     prepared as empty, image-agnostic surfaces only.

   Load order requirement: link this AFTER each page's inline <style> so the
   file is present globally — but because nothing here targets existing
   selectors, source order has no visual effect in 02.0. It becomes meaningful
   only when a page starts using `.reaz-*` classes in its own pass.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOUR TOKENS  (namespaced — coexist with legacy vars, override nothing)
   -------------------------------------------------------------------------- */
:root {
  /* Greens ------------------------------------------------------------- */
  --reaz-green-deep:      #2C3A22;              /* deep editorial green — bands, deep surfaces */
  --reaz-green-deep-rgb:  44, 58, 34;

  --reaz-olive:           #5E6642;              /* versatile muted olive — primary green for text/interactive on paper */
  --reaz-olive-rgb:       94, 102, 66;

  --reaz-olive-soft:      #8C9068;              /* softer muted green — subtle surfaces, secondary details, botanical relationships */
  --reaz-olive-soft-rgb:  140, 144, 104;

  --reaz-olive-archival:  #645E08;             /* KEPT archival olive — used sparingly as an accent, not for large surfaces */
  --reaz-olive-archival-rgb: 100, 94, 8;

  /* Pomegranate (available, Room-scoped by intent — not applied in 02.0) - */
  --reaz-pomegranate:     #8E241A;
  --reaz-pomegranate-rgb: 142, 36, 26;

  /* Paper & light ----------------------------------------------------- */
  --reaz-paper:           #FAF6E8;             /* warm paper cream — primary ground */
  --reaz-paper-rgb:       250, 246, 232;
  --reaz-paper-deep:      #F1EAD3;             /* deeper paper — recessed / banded ground */
  --reaz-paper-deep-rgb:  241, 234, 211;
  --reaz-off-white:       #FFFDF6;             /* warm off-white — raised paper objects */
  --reaz-off-white-rgb:   255, 253, 246;

  /* Ink --------------------------------------------------------------- */
  --reaz-ink:             #26291B;             /* near-black warm ink — primary text */
  --reaz-ink-rgb:         38, 41, 27;
  --reaz-ink-soft:        rgba(38, 41, 27, 0.66); /* secondary text */
  --reaz-ink-faint:       rgba(38, 41, 27, 0.42); /* tertiary / metadata */

  /* Lines / rules ----------------------------------------------------- */
  --reaz-line:            rgba(38, 41, 27, 0.16);  /* quiet neutral hairline */
  --reaz-line-strong:     rgba(38, 41, 27, 0.30);
  --reaz-line-olive:      rgba(94, 102, 66, 0.28); /* muted-green rule for botanical/editorial detail */

  /* ------------------------------------------------------------------- */
  /* Semantic aliases — REAZ-namespaced. Pages opt in by class only.     */
  --reaz-bg:              var(--reaz-paper);
  --reaz-bg-deep:         var(--reaz-paper-deep);
  --reaz-surface-raised:  var(--reaz-off-white);
  --reaz-text:            var(--reaz-ink);
  --reaz-text-soft:       var(--reaz-ink-soft);
  --reaz-text-faint:      var(--reaz-ink-faint);
  --reaz-accent:          var(--reaz-olive);       /* editorial accent = muted green, NOT red */
  --reaz-accent-quiet:    var(--reaz-olive-soft);

  /* Typography families (mirror the site's self-hosted stacks) --------- */
  --reaz-font-display: 'Bagnolia','Scotch Deck',Georgia,serif;
  --reaz-font-serif:   'Scotch Deck',Georgia,'Times New Roman',serif;
  --reaz-font-body:    'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --reaz-font-arabic:  'Amiri','Noto Naskh Arabic',serif;

  /* Fluid type scale (editorial) -------------------------------------- */
  --reaz-step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --reaz-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --reaz-step-1:  clamp(1.18rem, 1.10rem + 0.4vw, 1.4rem);
  --reaz-step-2:  clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
  --reaz-step-3:  clamp(2rem, 1.7rem + 1.6vw, 3rem);
  --reaz-step-4:  clamp(2.8rem, 2.2rem + 3vw, 4.6rem);

  /* Spacing / rhythm --------------------------------------------------- */
  --reaz-space-1: 0.5rem;
  --reaz-space-2: 1rem;
  --reaz-space-3: 1.5rem;
  --reaz-space-4: 2.5rem;
  --reaz-space-5: 4rem;

  /* Motion ------------------------------------------------------------- */
  --reaz-ease:      cubic-bezier(.2,.7,.2,1);
  --reaz-dur-fast:  .28s;
  --reaz-dur:       .5s;
  --reaz-dur-slow:  .8s;

  /* Object detailing --------------------------------------------------- */
  --reaz-radius:      2px;      /* paper edges are barely rounded, not boxy */
  --reaz-shadow-soft: 0 1px 0 var(--reaz-line), 0 8px 24px rgba(38,41,27,0.06);
  --reaz-shadow-lift: 0 1px 0 var(--reaz-line), 0 14px 34px rgba(38,41,27,0.10);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY PRIMITIVES  (class-scoped — no bare element selectors)
   -------------------------------------------------------------------------- */
.reaz-display {
  font-family: var(--reaz-font-display);
  font-weight: 400;
  font-size: var(--reaz-step-4);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--reaz-ink);
}
.reaz-h1 {
  font-family: var(--reaz-font-serif);
  font-weight: 400;
  font-size: var(--reaz-step-3);
  line-height: 1.1;
  color: var(--reaz-ink);
}
.reaz-h2 {
  font-family: var(--reaz-font-serif);
  font-weight: 400;
  font-size: var(--reaz-step-2);
  line-height: 1.18;
  color: var(--reaz-ink);
}
.reaz-lede {
  font-family: var(--reaz-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--reaz-step-1);
  line-height: 1.45;
  color: var(--reaz-ink-soft);
}
.reaz-prose {
  font-family: var(--reaz-font-serif);
  font-weight: 300;
  font-size: var(--reaz-step-0);
  line-height: 1.8;
  color: var(--reaz-ink);
}
.reaz-ui {
  font-family: var(--reaz-font-body);
  font-weight: 400;
  font-size: var(--reaz-step-0);
  line-height: 1.5;
  color: var(--reaz-ink);
}

/* --------------------------------------------------------------------------
   3. EDITORIAL METADATA PRIMITIVE  (category · read time · date lines)
   -------------------------------------------------------------------------- */
.reaz-meta {
  font-family: var(--reaz-font-body);
  font-weight: 400;
  font-size: var(--reaz-step--1);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--reaz-ink-faint);
}
.reaz-meta > * + *::before {
  content: '·';
  margin: 0 0.5em;
  color: var(--reaz-olive-soft);
}

/* --------------------------------------------------------------------------
   4. ANNOTATION PRIMITIVE  (margin notes / hand-of-rea asides)
   -------------------------------------------------------------------------- */
.reaz-annot {
  font-family: var(--reaz-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--reaz-step--1);
  line-height: 1.55;
  color: var(--reaz-olive);        /* muted green, quiet */
}

/* --------------------------------------------------------------------------
   5. PAPER / SURFACE PRIMITIVES  (bands + raised paper via hairlines, not boxes)
   -------------------------------------------------------------------------- */
.reaz-band        { background: var(--reaz-paper); }
.reaz-band-deep   { background: var(--reaz-paper-deep); }
.reaz-band-green  { background: var(--reaz-green-deep); color: var(--reaz-paper); }

.reaz-paper {
  background: var(--reaz-off-white);
  border: 1px solid var(--reaz-line);
  border-radius: var(--reaz-radius);
}

/* --------------------------------------------------------------------------
   6. OBJECT GRAMMAR PRIMITIVES  (frames / folios / notes / envelopes)
   Base geometry only — no imagery, no Urdu.
   -------------------------------------------------------------------------- */
.reaz-frame {
  position: relative;
  background: var(--reaz-off-white);
  border: 1px solid var(--reaz-line);
  padding: var(--reaz-space-3);
  border-radius: var(--reaz-radius);
}
.reaz-frame--ruled {           /* an inner keyline, like a mounted print */
  box-shadow: inset 0 0 0 1px var(--reaz-line);
}
.reaz-folio {                  /* a leaf of the archive */
  background: var(--reaz-paper);
  border-top: 1px solid var(--reaz-line);
  padding: var(--reaz-space-4) 0;
}
.reaz-note {                   /* a small pinned aside */
  background: var(--reaz-off-white);
  border: 1px solid var(--reaz-line);
  box-shadow: var(--reaz-shadow-soft);
  padding: var(--reaz-space-2);
  border-radius: var(--reaz-radius);
}
.reaz-envelope {               /* a letter object shell */
  background: var(--reaz-paper-deep);
  border: 1px solid var(--reaz-line);
  border-radius: var(--reaz-radius);
  padding: var(--reaz-space-3);
}
.reaz-drawer {                 /* a collapsible tray shell */
  overflow: hidden;
  border-top: 1px solid var(--reaz-line);
}

/* Decorative-object slot — image-agnostic. Imagery is added later, per pass. */
.reaz-mark {
  display: inline-block;
  line-height: 0;
}
.reaz-mark--rule {             /* a quiet olive pen-stroke, no image needed */
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--reaz-olive-soft);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. URDU PRIMITIVE  (companion vocabulary — NO glyphs placed in 02.0)
   Prepares safe typography/direction for گھر / خط / یاد when a pass adds them.
   -------------------------------------------------------------------------- */
.reaz-urdu {
  font-family: var(--reaz-font-arabic);
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--reaz-olive);
  opacity: 0.6;
  font-size: 0.85em;           /* companion scale — never larger than the English */
  line-height: 1.6;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   8. INTERACTIVE / LINK PRIMITIVES  (class-scoped — no global `a`)
   -------------------------------------------------------------------------- */
.reaz-link {
  color: var(--reaz-olive);
  text-decoration: none;
  border-bottom: 1px solid var(--reaz-line-olive);
  padding-bottom: 1px;
  transition: color var(--reaz-dur-fast) var(--reaz-ease),
              border-color var(--reaz-dur-fast) var(--reaz-ease);
}
.reaz-link:hover {
  color: var(--reaz-ink);
  border-color: var(--reaz-olive);
}
.reaz-cta {
  font-family: var(--reaz-font-body);
  font-weight: 500;
  font-size: var(--reaz-step-0);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--reaz-olive);
  text-decoration: none;
  transition: color var(--reaz-dur-fast) var(--reaz-ease);
}
.reaz-cta:hover { color: var(--reaz-ink); }

/* --------------------------------------------------------------------------
   9. FOCUS / ACCESSIBILITY PRIMITIVES  (opt-in class — no global override)
   -------------------------------------------------------------------------- */
.reaz-focus:focus-visible {
  outline: 2px solid var(--reaz-olive);
  outline-offset: 2px;
  border-radius: var(--reaz-radius);
}
.reaz-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   10. MOTION PRIMITIVES  (lightweight, CSS-only, opt-in)
   -------------------------------------------------------------------------- */
.reaz-rise {
  opacity: 0;
  transform: translateY(10px);
  animation: reazRise var(--reaz-dur) var(--reaz-ease) forwards;
}
.reaz-fade {
  opacity: 0;
  animation: reazFade var(--reaz-dur) var(--reaz-ease) forwards;
}
@keyframes reazRise { to { opacity: 1; transform: none; } }
@keyframes reazFade { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   11. REDUCED MOTION  (scoped to REAZ primitives only — no global reach)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reaz-rise, .reaz-fade {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   REAZ 2.0 — PASS 03A · GLOBAL IDENTITY FOUNDATION
   Additive: new brand-colour tokens + the shared deep-green colophon.
   No existing token is repointed except --reaz-paper, aligned to the ivory
   ground already used site-wide (#F5F4EA).
   ========================================================================== */
:root {
  /* Core paper aligned to the established ivory ground */
  --reaz-paper:      #F5F4EA;
  --reaz-paper-rgb:  245, 244, 234;

  /* Living / chartreuse botanical green (new) — selected fields & interruptions only */
  --reaz-green-living:     #C5BC58;
  --reaz-green-living-rgb: 197, 188, 88;

  /* Pale pistachio family (semantic alias for the Becoming/note green already in use) */
  --reaz-pale-green:       #E9EDDC;
  --reaz-pale-green-rgb:   233, 237, 220;

  /* 03A.1 corrected hierarchy:
     --reaz-olive-brand #645E08 is the PRIMARY brand olive (identity / strong accent).
     --reaz-green-muted #5E6642 is the softer MUTED green (secondary text, quiet metadata).
     The in-use --reaz-olive (#5E6642) is intentionally NOT repointed, so approved pages
     are not recoloured; new work should reference these semantic names. */
  --reaz-olive-brand:      #645E08;
  --reaz-olive-brand-rgb:  100, 94, 8;
  --reaz-green-muted:      #5E6642;
  --reaz-green-muted-rgb:  94, 102, 66;
}

/* ── Shared REAZ colophon (global footer field) ──────────────────────────
   Self-contained: uses tokens with hex fallbacks so it renders identically on
   every route, including legacy pages. A typographic bilingual signature for
   now; the real signature lock-up can replace .rzc-sign once supplied. */
.reaz-colophon {
  background: var(--reaz-green-deep, #2C3A22);
  color: var(--reaz-paper, #F5F4EA);
  padding: clamp(3rem,7vw,5.5rem) clamp(1.25rem,5vw,4.5rem) calc(clamp(2rem,4vw,3rem) + env(safe-area-inset-bottom));
  font-family: var(--reaz-font-body, 'DM Sans', system-ui, sans-serif);
}
.reaz-colophon .rzc-wrap { max-width: 1400px; margin: 0 auto; }
.reaz-colophon .rzc-sign { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.reaz-colophon .rzc-word { font-family: var(--reaz-font-display, 'Bagnolia','Scotch Deck', Georgia, serif); font-size: clamp(2rem,5vw,3.4rem); line-height: 1; letter-spacing: 0.01em; color: var(--reaz-paper, #F5F4EA); }
.reaz-colophon .rzc-urdu { font-family: 'Amiri','Noto Naskh Arabic', serif; direction: rtl; unicode-bidi: isolate; letter-spacing: normal; font-size: clamp(1.6rem,4vw,2.7rem); line-height: 1.4; color: rgba(245,244,234,0.86); }
.reaz-colophon .rzc-tag { flex-basis: 100%; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(245,244,234,0.6); margin-top: 0.5rem; }
.reaz-colophon .rzc-place { margin-top: clamp(1.6rem,4vw,2.4rem); font-size: 0.8rem; letter-spacing: 0.05em; color: rgba(245,244,234,0.82); }
.reaz-colophon .rzc-line { font-family: var(--reaz-font-serif, 'Scotch Deck', Georgia, serif); font-style: italic; font-weight: 300; font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.5; color: rgba(245,244,234,0.74); max-width: 26rem; margin-top: 0.5rem; }
.reaz-colophon .rzc-groups { display: flex; flex-wrap: wrap; gap: clamp(2rem,6vw,5rem); margin-top: clamp(2.4rem,6vw,4rem); }
.reaz-colophon .rzc-group { display: flex; flex-direction: column; gap: 0.55rem; }
.reaz-colophon .rzc-group-h { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,244,234,0.5); margin-bottom: 0.3rem; }
.reaz-colophon .rzc-group a, .reaz-colophon .rzc-letters-link {
  color: rgba(245,244,234,0.85); text-decoration: none; font-size: 0.92rem; line-height: 1.3;
  width: max-content; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .3s, border-color .3s;
}
.reaz-colophon .rzc-group a:hover, .reaz-colophon .rzc-group a:focus-visible,
.reaz-colophon .rzc-letters-link:hover, .reaz-colophon .rzc-letters-link:focus-visible {
  color: var(--reaz-paper, #F5F4EA); border-bottom-color: rgba(245,244,234,0.6); outline: none;
}
.reaz-colophon .rzc-group a:focus-visible, .reaz-colophon .rzc-letters-link:focus-visible { outline: 2px solid rgba(245,244,234,0.7); outline-offset: 3px; }
.reaz-colophon .rzc-letters-link { color: var(--reaz-green-living, #C5BC58); font-weight: 500; }
.reaz-colophon .rzc-letters-link:hover, .reaz-colophon .rzc-letters-link:focus-visible { color: var(--reaz-green-living, #C5BC58); border-bottom-color: var(--reaz-green-living, #C5BC58); }
.reaz-colophon .rzc-copy { margin-top: clamp(2.4rem,6vw,3.5rem); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,244,234,0.55); }
@media (max-width: 640px){
  .reaz-colophon .rzc-groups { flex-direction: column; gap: 1.8rem; }
}

/* ==========================================================================
   REAZ 2.0 — PASS 03B · identity distribution helpers (decorative)
   ========================================================================== */
.reaz-seal { text-align:center; padding:clamp(2.5rem,6vw,4rem) 1rem clamp(0.5rem,2vw,1.5rem); }
.reaz-seal img { width:clamp(220px,44vw,440px); height:auto; opacity:0.92; }
.reaz-flower-seal { text-align:center; padding-top:clamp(1.5rem,4vw,2.5rem); }
.reaz-flower-seal img { width:clamp(48px,7vw,76px); height:auto; opacity:0.9; }
.reaz-pattern-band { width:100%; height:clamp(58px,9vw,90px); background-repeat:repeat; background-size:clamp(170px,22vw,240px) auto; background-position:center; opacity:0.9; }
@media (prefers-reduced-motion:reduce){ .reaz-seal img, .reaz-flower-seal img { opacity:1; } }


/* ── PASS 03B.1 · mobile corrections (colophon compaction, safe area, seal) ── */
@media (max-width:640px){
  .reaz-colophon { padding-top:52px; padding-bottom:calc(48px + env(safe-area-inset-bottom)); }
  .reaz-colophon .rzc-place { margin-top:1.3rem; }
  .reaz-colophon .rzc-line { margin-top:0.4rem; }
  .reaz-colophon .rzc-groups { flex-direction:column; margin-top:48px; gap:40px; }
  .reaz-colophon .rzc-group { gap:0.5rem; }
  .reaz-colophon .rzc-copy { margin-top:48px; }
  /* signature seal: subordinate to the close, connected to the ending */
  .reaz-seal { padding:clamp(1.4rem,5vw,2rem) 1rem 0.4rem; }
  .reaz-seal img { width:clamp(178px,52vw,240px); }
}

/* ── PASS 03B.2 · botanical accents (colour illustrations, normal flow) ── */
.reaz-botanical { display:block; height:auto; width:clamp(96px,14vw,150px); margin-top:clamp(1.4rem,3vw,2.2rem); }
.reaz-botanical--right { margin-left:auto; margin-right:0; }
.reaz-botanical--left  { margin-right:auto; margin-left:0; }
@media (max-width:640px){ .reaz-botanical { width:clamp(84px,26vw,116px); } }