/* ============================================================================
   As-Suʿadāʾ Memorial — Design Tokens
   ----------------------------------------------------------------------------
   Evolved from the original "antique gold" system into the commissioned
   Memorial Red language:
     · Charcoal Black  #171717   (structure / surfaces)
     · Memorial Red    #A61E22   (accent / brand)
     · Off White       #F5F5F0   (text on dark)
     · Neutral Gray    accents
   Motif: Al-Dahnoon — the Lebanese red anemone — appears as a quiet watermark.
   Tokens are semantic-first: product code uses --text-heading, --accent,
   --surface-card … never raw scale values.
   ========================================================================== */

:root {
  /* ---- Charcoal / ink scale — backgrounds & structure ---- */
  --ink-985: #0C0C0D;   /* deepest — page base */
  --ink-950: #101011;   /* primary surface */
  --ink-900: #141416;   /* raised surface */
  --ink-850: #171717;   /* ★ spec charcoal — card base */
  --ink-800: #1C1C1F;   /* card surface */
  --ink-700: #26262A;   /* elevated card / input */
  --ink-600: #313137;   /* hairline borders, dividers */
  --ink-500: #3E3E45;   /* strong border, disabled track */
  --ink-400: #56565F;   /* muted icon on dark */

  /* ---- Memorial Red — accent / brand ---- */
  --red-100: #F6D9D6;
  --red-200: #EBA9A3;
  --red-300: #E0746C;   /* light red — text/links on dark (AA on charcoal) */
  --red-400: #C8332E;   /* hover fill */
  --red-500: #A61E22;   /* ★ PRIMARY Memorial Red */
  --red-600: #87171B;   /* pressed / deeper */
  --red-700: #6A1115;   /* deepest, on-light accent */
  --red-glow: rgba(166, 30, 34, 0.20);   /* focus halo */

  /* ---- Off-white / paper — text on dark ---- */
  --paper-100: #FBFBF9;
  --paper-200: #F5F5F0;  /* ★ PRIMARY text — soft off-white */
  --paper-300: #E6E6E1;

  /* ---- Alpha paper — layered text opacities on dark ---- */
  --paper-86: rgba(245, 245, 240, 0.88);  /* heading */
  --paper-72: rgba(245, 245, 240, 0.72);  /* body */
  --paper-52: rgba(245, 245, 240, 0.52);  /* muted */
  --paper-38: rgba(245, 245, 240, 0.38);  /* faint / placeholder */
  --paper-14: rgba(245, 245, 240, 0.14);  /* subtle fill */
  --paper-08: rgba(245, 245, 240, 0.07);  /* hover wash */

  /* ---- Neutral gray accents ---- */
  --gray-400: #9A9AA0;
  --gray-500: #6E6E76;
  --gray-600: #4A4A51;

  /* ---- Semantic status — desaturated, distinct from brand red ---- */
  --status-verified: #6FB08A;  /* sage — verified / published */
  --status-pending:  #D2A24C;  /* amber — in moderation */
  --status-error:    #D26A5E;  /* terracotta — destructive */
  --status-info:     #7FA7C4;  /* slate blue — neutral notice */

  /* ============ SEMANTIC ALIASES ============ */
  --bg-page:        var(--ink-985);
  --bg-surface:     var(--ink-950);
  --bg-raised:      var(--ink-900);
  --surface-card:   var(--ink-850);
  --surface-card-2: var(--ink-800);
  --surface-input:  var(--ink-700);
  --surface-hover:  var(--paper-08);

  --border-hairline: var(--ink-600);
  --border-strong:   var(--ink-500);
  --border-accent:   rgba(166, 30, 34, 0.42);

  --text-heading:   var(--paper-86);
  --text-body:      var(--paper-72);
  --text-muted:     var(--paper-52);
  --text-faint:     var(--paper-38);
  --text-on-accent: var(--paper-100);

  --accent:         var(--red-500);
  --accent-text:    var(--red-300);   /* accent used as text/links on dark */
  --accent-hover:   var(--red-400);
  --accent-press:   var(--red-600);
  --focus-ring:     var(--red-glow);

  /* ---- Typography ---- */
  --font-display: 'Amiri', 'Scheherazade New', 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fluid type scale — mobile-first, scales smoothly to desktop */
  --fs-display: clamp(2.4rem, 1.6rem + 4vw, 4rem);     /* hero name */
  --fs-h1:      clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-h2:      clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight: 1.18;
  --lh-snug:  1.4;
  --lh-body:  1.75;
  --lh-loose: 1.95;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-label: 0.16em;  /* Latin small-caps labels only — never Arabic */
  --tracking-wide:  0.04em;

  /* ---- Spacing — 4px base grid ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* ---- Layout ---- */
  --gutter: var(--space-5);
  --content-max: 44rem;    /* readable column (704px) */
  --shell-max: 78rem;      /* app shell (1248px) */
  --header-h: 4rem;
  --tabbar-h: 4.25rem;

  /* ---- Radii ---- */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px;

  --bw-hairline: 1px;
  --bw-strong: 1.5px;

  /* ---- Shadows — deep & soft on charcoal ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.42);
  --shadow-lg: 0 22px 54px rgba(0,0,0,0.55);
  --shadow-accent: 0 0 0 1px rgba(166,30,34,0.30), 0 10px 34px rgba(166,30,34,0.14);
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Quiet vignette & image scrims (NO gradient page fills) ---- */
  --scrim-bottom: linear-gradient(to top, rgba(12,12,13,0.94) 0%, rgba(12,12,13,0.55) 42%, rgba(12,12,13,0) 100%);
  --scrim-soft:   linear-gradient(to top, rgba(12,12,13,0.78) 0%, rgba(12,12,13,0) 70%);
  --vignette:     radial-gradient(130% 90% at 50% 0%, rgba(166,30,34,0.07) 0%, rgba(12,12,13,0) 58%);
  --accent-rule:  linear-gradient(90deg, transparent, var(--accent), transparent);

  /* ---- Motion — calm, no bounce ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ----------------------------------------------------------------------------
   High-contrast preference — deepen surfaces, brighten text & borders.
   --------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --text-body: var(--paper-86);
    --text-muted: var(--paper-72);
    --border-hairline: var(--ink-500);
    --accent-text: #EC8A82;
  }
}

/* Manual high-contrast toggle (mirrors the media query) */
:root[data-contrast="high"] {
  --text-body: var(--paper-86);
  --text-muted: var(--paper-72);
  --border-hairline: var(--ink-500);
  --accent-text: #EC8A82;
}