/* ========================================
   Al-Quran: Tadabbur — Design Tokens
   The sacred gem's palette and proportions.
   Inspired by Greentech's generous spacing,
   filtered through the Kanz gold-on-velvet identity.
   ======================================== */

:root {
  /* === Primary === */
  --color-gold: #805B11;
  --color-gold-light: #a07828;
  --color-gold-glow: rgba(128, 91, 17, 0.25);
  --color-brass: #8A7040;

  /* === Canvas (Dark — default) === */
  --color-canvas: #1c1917;
  --color-canvas-raised: #252220;
  --color-canvas-overlay: #3a3632;
  --color-text: #e8e2da;
  --color-text-muted: #9c9590;
  --color-text-faint: #6b6560;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  /* === Canvas (Light) === */
  --color-canvas-light: #faf8f4;
  --color-canvas-light-raised: #f0ece4;
  --color-text-light: #2c2a26;
  --color-text-light-muted: #57534e;

  /* === Canvas (Night) === */
  --color-canvas-night: #141210;
  --color-text-night: #c8c0b8;
  --color-text-night-muted: #8a8078;

  /* === Tajweed Jewel Tones ===
     Dark theme uses the "dark text" column for legibility on velvet.
     Light theme uses the "base" column (see themes.css). */
  --tajweed-ghunnah: #7a9fd4;       /* Sapphire — Nasalization */
  --tajweed-ikhfa: #50b0c0;         /* Turquoise — Concealment */
  --tajweed-idghaam: #50a890;       /* Emerald — Merging */
  --tajweed-iqlab: #b080d0;         /* Amethyst — Conversion */
  --tajweed-qalqalah: #c49060;      /* Tiger Eye — Echoing */
  --tajweed-madd: #d07070;          /* Ruby — Elongation */
  --tajweed-madd-lazim: #d08050;    /* Carnelian — Obligatory prolongation */
  --tajweed-tafkheem: #c0a050;      /* Topaz — Heavy letters */
  --tajweed-hamwasl: #7068b0;       /* Tanzanite — Hamza wasl */
  --tajweed-laam: #a0a840;          /* Olive — Lam shamsiyah */
  --tajweed-silent: #904040;        /* Garnet — Silent */

  /* === Typography === */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-arabic: 'UthmanicHafs', 'AmiriQuran', 'Amiri', 'Traditional Arabic', serif;

  --font-base: 17px;
  --font-sm: 14px;
  --font-xs: 12px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;

  --arabic-font-size: 34px;
  --translation-font-size: 18px;
  --wbw-font-size: 11px;

  --line-height: 1.75;
  --line-height-arabic: 2.6;
  --line-height-tight: 1.35;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* === Spacing (8px grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === Borders === */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* === Shadows (softer) === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-drawer: 0 -4px 24px rgba(0, 0, 0, 0.4);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* === Layout === */
  --top-bar-height: 48px;
  --bottom-nav-height: 56px;
  --content-max-width: 100%;
  --mushaf-padding: var(--space-5);

  /* === Z-index scale === */
  --z-content: 1;
  --z-sticky: 10;
  --z-drawer-backdrop: 90;
  --z-drawer: 100;
  --z-nav: 50;
  --z-top-bar: 50;
}