/* ============================================================
   DESIGN TOKENS  ·  v4 "LIVING INSTRUMENT"
   Every color, font, radius, spacing, light, and easing curve the
   app uses. Imported first by every page — nothing else may
   redefine these custom properties.

   v4 EVOLUTION (Sudegy Design Intelligence):
   The v3 identity ("two acts, one instrument" — apothecary ink/
   gold/bone, numbering over icons, instrument bezel) is preserved
   verbatim. v4 adds the one thing v3 lacked: LIGHT. A dark UI only
   reads as premium when it reads as *lit* — so this file introduces
   a canonical elevation + edge-light + ambient-bloom vocabulary that
   the rest of the system draws from. No existing token was removed;
   every v3 variable below is byte-identical so nothing repaints
   differently than before. New tokens are grouped under "v4 — LIGHT".
   ============================================================ */
/* ============================================================
   DR. MAZIN ABDELWAHAB ABDELWAHAB — PHARMACEUTICAL DIAGNOSTIC SYSTEM
   STRUCTURE: two acts, one instrument.
   Act I  "The Consultation" — dark ink canvas (hero, the six
           questions, the AI scan, the loading sequence).
   Act II "The Document" — the issued diagnostic report.
   The header and footer never change — a fixed dark "instrument
   bezel" that frames both acts so the product reads as one system.
   Zero emoji. Zero icon packs. Numbering and typography replace
   every decorative icon that used to live in a colored tile.
   ============================================================ */

:root {
  /* Ink scale — warm apothecary near-black, not cyber-purple-black */
  --obsidian:        #15130F;
  --ink:              #1C1A14;
  --ink-raised:       #242019;
  --ink-raised-2:     #2C271E;
  --hairline:         rgba(247,242,230,0.08);
  --hairline-strong:  rgba(247,242,230,0.16);

  /* Paper — the surface for Act II, the issued document */
  --bone:             #F7F2E5;
  --bone-dim:         #ECE3CC;
  --paper-hairline:   rgba(43,37,25,0.10);
  --paper-hairline-strong: rgba(43,37,25,0.20);

  /* Amber — one chromatic accent, the color of a compounded tincture */
  --gold:             #C49A4A;
  --gold-bright:      #DDB868;
  --gold-soft:        rgba(196,154,74,0.13);

  --mist:             #9C9486;
  --mist-dim:         #847A6A;
  --snow:             #F6F2E9;

  --sage:             #8FAE87;
  --rose:             #C9847A;

  --scan-orange:      #D99A5B;
  --scan-blue:        #7FA8C9;

  /* Compatibility aliases — structural CSS may still reach for these */
  --void:       var(--obsidian);
  --void-2:     var(--ink);
  --void-3:     var(--ink-raised);
  --void-soft:  var(--ink-raised-2);
  --white:      var(--snow);
  --amber:      var(--gold);
  --amber-light:var(--gold-bright);
  --amber-pale: var(--gold-soft);
  --error:      var(--rose);

  /* Ink-on-paper pairing for Act II */
  --ink-on-bone:      #2B2519;
  --ink-on-bone-dim:  rgba(43,37,25,0.62);
  --gold-on-bone:     #79602C;
  --gold-on-bone-dim: #8C7240;

  /* Radius — small and precise. Buttons are instruments, not pills. */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: var(--radius-pill);
  --r-btn: 6px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.16,1,.3,1);

  --ff-body:    'Tajawal', sans-serif;
  --ff-display: 'Tajawal', sans-serif;
  --ff-latin-display: 'Bricolage Grotesque', sans-serif;
  --ff-latin-body:    'Manrope', sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;

  --fs-2xs: 10px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 29px;
  --fs-2xl: 38px;
  --fs-3xl: 52px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: calc(env(safe-area-inset-bottom, 0px) + 40px);
  --sig-h: 40px;

  /* ============================================================
     v4 — LIGHT, ELEVATION & MATERIAL
     The vocabulary that turns flat fills into lit physical surfaces.
     Used by cards, bezels, buttons, the focal hero, the loader bloom.
     ============================================================ */

  /* Edge-light — the 1px highlight along a surface's top lip, as if a
     soft light source sits above the screen. The signature of "lit". */
  --edge-light:        inset 0 1px 0 rgba(247,242,230,0.05);
  --edge-light-strong: inset 0 1px 0 rgba(247,242,230,0.09);
  --edge-inset:        inset 0 0 0 1px var(--hairline);

  /* Elevation — layered, warm-tinted shadows. Never pure black:
     a premium dark surface casts an ink-warm shadow, not a void. */
  --shadow-1: 0 1px 2px rgba(8,7,5,0.30), 0 2px 8px rgba(8,7,5,0.22);
  --shadow-2: 0 2px 4px rgba(8,7,5,0.32), 0 8px 22px rgba(8,7,5,0.34);
  --shadow-3: 0 4px 10px rgba(8,7,5,0.36), 0 18px 48px rgba(8,7,5,0.46);

  /* Composite surface lights — drop these straight onto a card */
  --lift-1: var(--edge-light), var(--shadow-1);
  --lift-2: var(--edge-light), var(--shadow-2);
  --lift-3: var(--edge-light-strong), var(--shadow-3);

  /* Gold luminance — the warm glow an active/primary element emits.
     This is the "object-as-light-source" energy from the library,
     tuned to Sudegy warm gold (NEVER the competitor's cool blue-white). */
  --glow-gold-sm: 0 0 0 1px rgba(196,154,74,0.20), 0 4px 18px rgba(196,154,74,0.18);
  --glow-gold-md: 0 0 0 1px rgba(196,154,74,0.26), 0 6px 26px rgba(196,154,74,0.26);
  --glow-gold-bloom: 0 0 40px rgba(221,184,104,0.30), 0 0 90px rgba(196,154,74,0.16);

  /* Ambient field — the slow apothecary light that lives behind the
     dark canvas on every Act I screen. Two warm pools, off-center. */
  --ambient-warm:  rgba(196,154,74,0.10);
  --ambient-deep:  rgba(120,86,40,0.10);
  --ambient-cool:  rgba(127,168,201,0.05);

  /* Gold gradient — for the primary key and the focal accents. Gives
     the CTA a top-lit sheen instead of a flat paint chip. */
  --grad-gold:   linear-gradient(177deg, var(--gold-bright), var(--gold) 62%, #B68C3E);
  --grad-gold-soft: linear-gradient(160deg, rgba(221,184,104,0.16), rgba(196,154,74,0.06));

  /* Motion curves — additive to --ease; named for intent.
     Motion DNA: calm, precise, editorial. NO overshoot, NO rubber —
     every curve settles cleanly (Apple / Linear / VisionOS). */
  --ease-out:    cubic-bezier(.16,1,.3,1);     /* settle (Sudegy default) */
  --ease-spring: cubic-bezier(.2,.7,.2,1);     /* confident settle, no bounce */
  --ease-glide:  cubic-bezier(.22,.61,.36,1);  /* smooth in-out */

  /* Canonical breathing-glow loop length (library rule: 1.5–2.5s) */
  --breath: 2.2s;

  /* ============================================================
     v4.2 — CINEMATIC TRANSFORM
     Phase-2 amplification. The subtle pass read as "the same product";
     these tokens push the identity to "an entirely new premium AI
     instrument" — gold-gradient display type, luxury gold-bordered
     panels, and visible volumetric gold light. Used by the canvas
     centerpiece, the hero, the loader orb, and every panel surface.
     ============================================================ */

  /* Gold-gradient display ink — the signature of the new identity.
     Applied to hero + key titles via .goldtext (see base.css). */
  --text-gold-grad: linear-gradient(102deg, #F4D58A 0%, #DDB868 38%, #C49A4A 72%, #E8C77E 100%);
  --gold-deep:   #8A6B2E;
  --gold-ember:  #F4D58A;

  /* Luxury panel — the dark gold-bordered tile the new UI is built from.
     Replaces flat fills on cards so every surface reads as a machined
     instrument panel lit from above, with a hair of gold in the border. */
  --panel:        linear-gradient(158deg, #211D16 0%, #1A1711 60%, #161310 100%);
  --panel-raised: linear-gradient(158deg, #2A241B 0%, #211D15 62%, #1B1812 100%);
  --panel-border: rgba(196,154,74,0.22);
  --panel-border-soft: rgba(196,154,74,0.12);
  --panel-glow:   0 1px 0 rgba(244,213,138,0.10) inset, 0 0 0 1px rgba(196,154,74,0.10), 0 18px 50px rgba(8,7,5,0.55);
  --panel-glow-active: 0 1px 0 rgba(244,213,138,0.22) inset, 0 0 0 1px rgba(196,154,74,0.45), 0 0 30px rgba(196,154,74,0.22), 0 22px 60px rgba(8,7,5,0.6);

  /* Stronger volumetric gold light (phase-1 glows were too timid) */
  --glow-gold-lg:    0 0 0 1px rgba(196,154,74,0.34), 0 8px 40px rgba(221,184,104,0.40);
  --glow-gold-xl:    0 0 60px rgba(221,184,104,0.45), 0 0 120px rgba(196,154,74,0.22);

  /* Ambient field — amplified, more visible warm pools */
  --ambient-warm:  rgba(212,168,86,0.16);
  --ambient-deep:  rgba(150,104,44,0.16);
  --ambient-cool:  rgba(127,168,201,0.06);

  /* Larger cinematic display scale for hero + section titles */
  --fs-hero:   clamp(40px, 12vw, 62px);
  --fs-4xl:    46px;
}