/* ========================================
   KANZ — Design Tokens
   A treasure from the treasures of Paradise.
   The colorful sibling. Same family, at a celebration.
   ======================================== */

:root {
  /* --- Dark Warm Base (not cold, not moody — warm dark) --- */
  --bg: #1c1917;
  --bg-section: #231f1c;
  --bg-aside: #2a2522;
  --bg-elevated: #302b27;

  /* --- Text (warm, inherited from siblings) --- */
  --text: #ece7e0;
  --text-light: #a8a099;
  --text-lighter: #706862;

  /* --- Borders (warm, not gray — sibling DNA) --- */
  --border: rgba(232, 227, 219, 0.1);
  --border-light: rgba(232, 227, 219, 0.06);

  /* ============================================================
     JEWEL PALETTE — visible, real, not subtle
     These are actual gem colors, not rgba hints.
     ============================================================ */

  /* Gold — deep rich gold, like looking into the stone */
  --gold: #805B11;
  --gold-bright: #c49b3c;
  --gold-bg: #805B11;
  --gold-bg-hover: #6e4e0e;
  --gold-border: #9a6e18;
  --gold-glow: 0 0 24px rgba(128, 91, 17, 0.4);

  /* Emerald — deep rich teal-green */
  --emerald: #0B453F;
  --emerald-bright: #3db88e;
  --emerald-bg: #0B453F;
  --emerald-bg-hover: #093a35;
  --emerald-border: #0e5a52;
  --emerald-glow: 0 0 24px rgba(11, 69, 63, 0.4);

  /* Ruby — deep dark red */
  --ruby: #470000;
  --ruby-bg: #470000;
  --ruby-bg-hover: #3a0000;
  --ruby-border: #622011;

  /* Amber — deep burnt amber */
  --amber: #622011;
  --amber-bg: #622011;
  --amber-bg-hover: #531b0e;
  --amber-border: #7a2a16;

  /* Sapphire — deep dark blue */
  --sapphire: #1C2A47;
  --sapphire-bg: #1C2A47;
  --sapphire-bg-hover: #16223b;
  --sapphire-border: #243560;

  /* Amethyst — deep dark purple */
  --amethyst: #1D0926;
  --amethyst-bg: #1D0926;
  --amethyst-bg-hover: #160720;
  --amethyst-border: #33062B;

  /* Olive/Peridot — dark olive green */
  --olive: #4A4D00;
  --olive-bg: #4A4D00;
  --olive-bg-hover: #3e4000;
  --olive-border: #5c6000;

  /* Topaz — warm brown-gold */
  --topaz: #6B4400;
  --topaz-bg: #6B4400;
  --topaz-bg-hover: #5c3a00;
  --topaz-border: #825400;

  /* Tanzanite — deep blue-violet */
  --tanzanite: #1A1040;
  --tanzanite-bg: #1A1040;
  --tanzanite-bg-hover: #140c34;
  --tanzanite-border: #2a1860;

  /* Tourmaline — dark teal */
  --tourmaline: #1B4B3A;
  --tourmaline-bg: #1B4B3A;
  --tourmaline-bg-hover: #164030;
  --tourmaline-border: #226048;

  /* Citrine — yellow-brown */
  --citrine: #5C4A00;
  --citrine-bg: #5C4A00;
  --citrine-bg-hover: #4e3e00;
  --citrine-border: #725c00;

  /* Pearl — warm iridescent off-white */
  --pearl: #EAE0C8;
  --pearl-bg: #3a3630;
  --pearl-bg-hover: #2e2a26;
  --pearl-border: #5a5450;

  /* Garnet — deep wine red */
  --garnet: #4B0606;
  --garnet-bg: #4B0606;
  --garnet-bg-hover: #3e0404;
  --garnet-border: #641010;

  /* Carnelian — deep burnt orange-red */
  --carnelian: #6B1B0A;
  --carnelian-bg: #6B1B0A;
  --carnelian-bg-hover: #5c1608;
  --carnelian-border: #842210;

  /* Lapis Lazuli — deep royal blue */
  --lapis: #1B3A6B;
  --lapis-bg: #1B3A6B;
  --lapis-bg-hover: #16325c;
  --lapis-border: #244a84;

  /* Jade — deep rich green */
  --jade: #0A6B3A;
  --jade-bg: #0A6B3A;
  --jade-bg-hover: #085c30;
  --jade-border: #108448;

  /* Sunstone — deep warm amber-orange (Morning) */
  --sunstone: #6B3A0A;
  --sunstone-bg: #6B3A0A;
  --sunstone-bg-hover: #5c3208;
  --sunstone-border: #844a10;

  /* Iolite — deep indigo-violet (Evening) */
  --iolite: #2A1A4A;
  --iolite-bg: #2A1A4A;
  --iolite-bg-hover: #22143e;
  --iolite-border: #382460;

  /* Malachite — deep forest green (After Salah) */
  --malachite: #0A4A2A;
  --malachite-bg: #0A4A2A;
  --malachite-bg-hover: #083e22;
  --malachite-border: #106038;

  /* Turquoise — deep teal-blue (Remember Him) */
  --turquoise: #0A4A5C;
  --turquoise-bg: #0A4A5C;
  --turquoise-bg-hover: #083e4e;
  --turquoise-border: #106070;

  /* Tiger Eye — deep golden-brown (Prophets Asked) */
  --tiger-eye: #5C3A0A;
  --tiger-eye-bg: #5C3A0A;
  --tiger-eye-bg-hover: #4e3208;
  --tiger-eye-border: #724a10;

  /* --- Brand --- */
  --aged-brass: #8A7040;

  /* Spinel — deep magenta-plum (Hadith Collection cards) */
  --spinel: #4A0A3A;
  --spinel-bg: #4A0A3A;
  --spinel-bg-hover: #3d0830;
  --spinel-border: #601050;
  --spinel-glow: 0 0 24px rgba(74, 10, 58, 0.4);

  /* --- Jewel Chip Text Colors (light text on dark bg) --- */
  --chip-ruby: #e8a0a0;
  --chip-emerald: #7ad4b0;
  --chip-sapphire: #8ab4e0;
  --chip-olive: #b8bc60;
  --chip-gold: #d4b060;
  --chip-amethyst: #c090e0;
  --chip-pearl: #c8c0b8;
  --chip-topaz: #d4a050;
  --chip-tanzanite: #9080c0;
  --chip-tourmaline: #60c0a0;
  --chip-citrine: #c0a840;
  --chip-garnet: #d08080;
  --chip-carnelian: #e0a080;
  --chip-lapis: #80b0e0;
  --chip-jade: #60d0a0;
  --chip-turquoise: #60c0d0;
  --chip-tiger-eye: #d0b060;
  --chip-spinel: #d080c0;

  /* --- Functional --- */
  --accent: var(--emerald-bright);
  --pulse: rgba(196, 155, 60, 0.3);
  --complete: rgba(61, 184, 142, 0.25);
  --toggle-highlight: rgba(196, 155, 60, 0.35);

  /* --- Shadow (matching sibling depth) --- */
  --shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 4px 30px rgba(0, 0, 0, 0.2);

  /* --- Card (matching Path to Water radius) --- */
  --radius: 12px;

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 56px;

  /* --- Typography (Playfair + Inter, sibling scale) --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Noto Naskh Arabic', serif;

  --text-xxs: 0.6rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --line-height-body: 1.75;
  --line-height-heading: 1.25;

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