/* Sabeely mobile-first reshell — design tokens (vibrancy pass ramp).
   The only root token block in the project. No component may introduce a raw
   px value for color, radius, type, or spacing; no importance overrides. */
:root {
  /* color — elevated vibrancy ramp: Radiant Blue / Deep Cobalt / Lumen +
     Electric (hover/pressed) / Sky (the user's own content) + Dawn Gold for
     achievement, Midnight ink and Slate on a cool Ice Blue ground.
     --ground here supersedes the brand doc's Warm White — the vibrancy pass
     wins the visual layer. */
  --brand: #2460F8;
  --brand-deep: #0B2FA6;
  --lumen: #4E8CFF;
  --electric: #2E6BFF;
  --sky: #CDDBFF;
  --ink: #041038;
  --muted: #5E6A87;
  --gold: #F1B22B;
  --glow: #FFCB52;
  --surface: #FFFFFF;
  --ground: #F2F6FE;
  --tint: #E7F1FF;
  --line: #D9E4F5; /* old --line value (#CDDBFF) moved to --sky */
  --danger: #C6302C;
  --success: #178A5B;

  /* gradients — single source of truth; derived from the ramp above */
  --grad-brand: linear-gradient(135deg, var(--brand), var(--lumen));
  --grad-gold: linear-gradient(135deg, var(--gold), var(--glow));

  /* Quran script — the Fatihah recitation course renders Uthmani ayahs */
  --font-quran: 'Scheherazade New', 'Tajawal', serif;

  /* ambient wash — contract for Phase 2's shell agent:
     Phase 2 sets a per-tab --wash-color and renders a fixed radial gradient
     anchored bottom-center above the dock at --wash-opacity (6–10%),
     cross-fading over --wash-ms ease-out; tab roots only */
  --wash-opacity: .08;
  --wash-ms: 300ms;

  /* type — 6 sizes, nothing else; 12px is the floor */
  --t-display: 28px; --lh-display: 34px;
  --t-title: 22px;   --lh-title: 28px;
  --t-heading: 17px; --lh-heading: 24px;
  --t-body: 16px;    --lh-body: 24px;
  --t-sub: 14px;     --lh-sub: 20px;
  --t-caption: 12px; --lh-caption: 16px;

  /* radius — 3 + pill */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* spacing — 4pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --gutter: 16px;

  /* elevation — two shadows only; cards use hairlines, not shadows */
  --e-raised: 0 2px 10px rgba(4, 16, 56, .10);
  --e-sheet: 0 -8px 30px rgba(4, 16, 56, .18);

  /* chrome */
  --topbar-h: 56px;
  --dock-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock-clear: calc(var(--dock-h) + var(--safe-bottom) + var(--s-4) + var(--dock-lift, 0px));

  /* motion */
  --push-ms: 250ms;
  --fade-ms: 150ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- glass 2.0 material (theme/THEMING-PLAN.md) ----
     Additive: the flat skin above stays authoritative for hue; these tokens
     describe the glass material and the light engine. Removing css/glass.css
     and js/glassfx.js restores the flat skin; this block is then inert. */
  --shade: 30, 64, 175;           /* ambient shadow tint — blue-navy, never grey */
  --t: 61, 123, 255;              /* mood triplet; overridden per tab pane */
  --deep: #1D4ED8;                /* readable deep hue for active text on glass */
  --glass-hi: rgba(255, 255, 255, .86);
  --glass-lo: rgba(255, 255, 255, .64);
  --glass-rim: rgba(255, 255, 255, .9);
  --glass-blur: 20px;             /* cards/sheets; the dock runs 24px */
  --stage: linear-gradient(180deg, #EDF2FF 0%, #F6F8FF 38%, #FFFFFF 78%);
  --stage-settings: linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 45%); /* neutral utility stage (settings) */
  --pour-ms: 620ms;
  --dock-pour-ms: 1150ms;
  --spill-ms: 1000ms;
  --lit-ms: 400ms;
  --dock-lift: 10px;              /* the floating dock's rise above the safe area */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}