/* ========================================
   Theme Overrides — Dark (default), Light, Night
   ======================================== */

/* === Dark (default) — The Velvet === */
[data-theme="dark"] {
  --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);

  color-scheme: dark;
}

/* === Light — The Parchment === */
[data-theme="light"] {
  --color-canvas: #faf8f4;
  --color-canvas-raised: #f0ece4;
  --color-canvas-overlay: #e7e0d5;
  --color-text: #2c2a26;
  --color-text-muted: #57534e;
  --color-text-faint: #78716c;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-subtle: rgba(0, 0, 0, 0.04);

  color-scheme: light;

  /* Tajweed: deep jewel tones for light backgrounds — max distinction */
  --tajweed-ghunnah: #1C2A47;       /* Sapphire — blue */
  --tajweed-ikhfa: #0A4A5C;         /* Turquoise — teal */
  --tajweed-idghaam: #0B453F;       /* Emerald — green */
  --tajweed-iqlab: #1D0926;         /* Amethyst — purple */
  --tajweed-qalqalah: #5C3A0A;     /* Tiger Eye — brown */
  --tajweed-madd: #470000;           /* Ruby — red */
  --tajweed-madd-lazim: #6B1B0A;    /* Carnelian — orange-red */
  --tajweed-tafkheem: #6B4400;      /* Topaz — amber */
  --tajweed-hamwasl: #1A1040;       /* Tanzanite — indigo */
  --tajweed-laam: #4A4D00;          /* Olive — yellow-green */
  --tajweed-silent: #4B0606;        /* Garnet — dark maroon */
}

/* === Night — The Candlelight === */
[data-theme="night"] {
  --color-canvas: #141210;
  --color-canvas-raised: #1e1b18;
  --color-canvas-overlay: #302c27;
  --color-text: #d4c4a8;
  --color-text-muted: #a0927a;
  --color-text-faint: #756850;
  --color-border: rgba(255, 255, 255, 0.05);
  --color-border-subtle: rgba(255, 255, 255, 0.025);

  color-scheme: dark;

  --color-gold: #9a7530;
  --color-gold-light: #b08a40;
}

/* Night mode — warm candlelight glow */
[data-theme="night"] #app {
  filter: sepia(0.08) saturate(0.82);
}

[data-theme="night"] #main-content {
  background: radial-gradient(ellipse at center, rgba(180, 140, 80, 0.06) 0%, transparent 70%);
}

/* Night mode — the reading rhythm slows down */
[data-theme="night"] .ayah-arabic {
  font-size: calc(var(--arabic-font-size) * 1.08);
  line-height: 2.4;
}

[data-theme="night"] .ayah-translation {
  line-height: 2;
  letter-spacing: 0.01em;
}

[data-theme="night"] .bismillah {
  font-size: 34px;
  padding: var(--space-8) 0;
}

[data-theme="night"] .surah-header {
  padding: var(--space-14) var(--space-4) var(--space-8);
}

[data-theme="night"] .ayah {
  padding: var(--space-10) var(--space-5);
}

/* Softer, slower transitions at night — targeted, not global */
[data-theme="night"] .ayah,
[data-theme="night"] .bismillah,
[data-theme="night"] .surah-header,
[data-theme="night"] .threshold-panel,
[data-theme="night"] .reflection-panel {
  transition-duration: 0.4s;
}

[data-theme="night"] .ayah-quick-btn {
  opacity: 0.15;
}

[data-theme="night"] .ayah:hover .ayah-quick-btn {
  opacity: 0.5;
}

/* === Manuscript — The Parchment === */
[data-theme="manuscript"] {
  --color-canvas: #f4ead4;
  --color-canvas-raised: #ebe0c8;
  --color-canvas-overlay: #ddd2b8;
  --color-text: #2a2418;
  --color-text-muted: #5c5040;
  --color-text-faint: #8a7d68;
  --color-border: rgba(90, 70, 40, 0.12);
  --color-border-subtle: rgba(90, 70, 40, 0.06);

  color-scheme: light;

  --color-gold: #7a5518;
  --color-gold-light: #966a20;
  --color-gold-glow: rgba(122, 85, 24, 0.2);
  --color-brass: #6b5530;

  /* Tajweed: warm deep tones for parchment — max distinction */
  --tajweed-ghunnah: #1C2A47;       /* Sapphire — blue */
  --tajweed-ikhfa: #0A4A5C;         /* Turquoise — teal */
  --tajweed-idghaam: #0B453F;       /* Emerald — green */
  --tajweed-iqlab: #1D0926;         /* Amethyst — purple */
  --tajweed-qalqalah: #5C3A0A;     /* Tiger Eye — brown */
  --tajweed-madd: #470000;           /* Ruby — red */
  --tajweed-madd-lazim: #6B1B0A;    /* Carnelian — orange-red */
  --tajweed-tafkheem: #6B4400;      /* Topaz — amber */
  --tajweed-hamwasl: #1A1040;       /* Tanzanite — indigo */
  --tajweed-laam: #4A4D00;          /* Olive — yellow-green */
  --tajweed-silent: #4B0606;        /* Garnet — dark maroon */
}

[data-theme="manuscript"] #main-content {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}

/* Theme transition */
[data-theme] {
  background-color: var(--color-canvas);
  color: var(--color-text);
}