/* Design tokens: change the look of the whole site from here.
   The app has one light theme (the role colours in :root). Only the player card takes each bhajan's own
   colours: ui/scenes.js puts the bhajan's theme on it (<article class="deck" data-theme="...">), and the
   [data-theme] blocks below override the role colours inside it. */
:root {
  color-scheme: light; /* (the phone's own parts — select lists, date pickers, scrollbars — light too) */

  /* Base palette */
  --saffron-600: #d9661f;
  --saffron-500: #f08a24;
  --saffron-400: #f6a845;
  --gold-500: #d9a62e;
  --gold-400: #e9c160;
  --gold-300: #f3d98b;
  --cream-100: #fff7e8;
  --cream-200: #f7e9cf;
  --cream-300: #e8d3ae;

  /* Roles — "Chandan": warm ivory page, white cards, kumkum-maroon headings, saffron buttons */
  --bg-rgb: 251, 245, 234;
  --fg-rgb: 46, 26, 18;         /* the text's colour, for tints over the page */
  --ink-rgb: 255, 255, 255;     /* tint of glass panels */
  --shade-rgb: 46, 26, 18;      /* darkening over pictures */
  --accent-rgb: 200, 86, 14;
  --glow-rgb: 236, 146, 44;
  --line-rgb: 196, 152, 74;
  --bg: rgb(var(--bg-rgb));
  --surface: #ffffff;
  --screen-bg: #efe3cc;
  --card: #ffffff;              /* rows, cells, fields and chips */
  --card-hover: #fff3e0;
  --accent: #ad4b0d;
  --accent-strong: #d9661f;
  --title: #8a1c2b;
  --highlight: #a63a12;
  --btn-a: #f8bf5e;
  --btn-b: #ec8a2c;
  --on-accent: #2b1608;         /* on the buttons' saffron */

  --text: rgb(var(--fg-rgb));
  --text-muted: rgba(var(--fg-rgb), 0.76);
  --text-faint: rgba(var(--fg-rgb), 0.64);
  --glass: rgba(var(--ink-rgb), 0.8);
  --glass-strong: rgba(var(--ink-rgb), 0.96);
  --glass-border: rgba(var(--line-rgb), 0.38);
  --line: rgba(var(--line-rgb), 0.26);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.55);

  /* Type */
  --font-display: "Marcellus", "Yatra One", "Mukta", Georgia, serif; /* Latin-only fonts first: English in them, Hindi falls through */
  --font-body: "Nunito Sans", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-book: "Tiro Devanagari Hindi", "Mukta", Georgia, serif; /* printed-book Hindi, for the Granth pages */

  /* Spacing: use only these steps for gaps, padding and margins in new work */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;

  /* Shape & depth */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-lg: 0 18px 44px -14px rgba(90, 45, 15, 0.3);

  /* Layout */
  --gutter: 16px;
  --content-max: 880px;
  --topbar-h: 64px;
}

/* A bhajan's own colours (its holy place's, dark): the player card, and the Yatra page's drawing.
   The colours made from a theme's own are worked out again here, inside it. */
[data-theme] {
  color-scheme: dark;
  --fg-rgb: 255, 247, 232;
  --bg: rgb(var(--bg-rgb));
  --card: rgba(255, 247, 232, 0.06);
  --card-hover: rgba(255, 247, 232, 0.13);
  --text: var(--cream-100);
  --text-muted: rgba(255, 247, 232, 0.72);
  --text-faint: rgba(255, 247, 232, 0.5);
  --glass: rgba(var(--ink-rgb), 0.6);
  --glass-strong: rgba(var(--ink-rgb), 0.88);
  --glass-border: rgba(var(--line-rgb), 0.32);
  --line: rgba(var(--line-rgb), 0.18);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.7);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

/* Adinath at Palitana — dawn: saffron & gold on warm maroon */
[data-theme="adinath"] {
  --bg-rgb: 30, 11, 6;
  --ink-rgb: 30, 12, 6;
  --shade-rgb: 22, 8, 4;
  --accent-rgb: 246, 168, 69;
  --glow-rgb: 240, 138, 36;
  --line-rgb: 233, 193, 96;
  --surface: #2a1208;
  --screen-bg: #140704;
  --accent: var(--saffron-400);
  --accent-strong: var(--saffron-500);
  --title: var(--gold-300);
  --highlight: var(--gold-400);
  --btn-a: var(--gold-300);
  --btn-b: var(--saffron-500);
  --on-accent: #1e0b06;
}

/* Neminath at Girnar — forest green with morning gold */
[data-theme="neminath"] {
  --bg-rgb: 10, 26, 23;
  --ink-rgb: 10, 26, 22;
  --shade-rgb: 6, 16, 14;
  --accent-rgb: 236, 190, 96;
  --glow-rgb: 226, 170, 70;
  --line-rgb: 240, 214, 150;
  --surface: #12302b;
  --screen-bg: #07130f;
  --accent: #ecbe60;
  --accent-strong: #e2a846;
  --title: #f6e0a6;
  --highlight: #f0cf7e;
  --btn-a: #f6e3ae;
  --btn-b: #e2a846;
  --on-accent: #0b1f1b;
}

/* Mahavir at Pawapuri, evening aarti — midnight plum with warm diya gold */
[data-theme="mahavir"] {
  --bg-rgb: 17, 10, 31;
  --ink-rgb: 16, 9, 30;
  --shade-rgb: 10, 6, 20;
  --accent-rgb: 255, 179, 71;
  --glow-rgb: 255, 154, 60;
  --line-rgb: 255, 196, 120;
  --surface: #22143a;
  --screen-bg: #0d0717;
  --accent: #ffb347;
  --accent-strong: #ff9a3c;
  --title: #ffd98a;
  --highlight: #ffc766;
  --btn-a: #ffe29a;
  --btn-b: #ff9a3c;
  --on-accent: #1a0f2e;
}

/* Parshvanath at Shikharji — dusk indigo with peach sunset */
[data-theme="parshvanath"] {
  --bg-rgb: 22, 22, 58;
  --ink-rgb: 22, 20, 54;
  --shade-rgb: 14, 12, 36;
  --accent-rgb: 255, 160, 122;
  --glow-rgb: 255, 138, 101;
  --line-rgb: 255, 205, 170;
  --surface: #25224f;
  --screen-bg: #0e0d26;
  --accent: #ffa07a;
  --accent-strong: #ff8a65;
  --title: #ffd6b3;
  --highlight: #ffc49b;
  --btn-a: #ffdcae;
  --btn-b: #ff8f6b;
  --on-accent: #1d1a3f;
}

/* Shravanabelagola — Bahubali in bright morning: cobalt sky with sunlit turmeric */
[data-theme="shravanabelagola"] {
  --bg-rgb: 9, 25, 44;
  --ink-rgb: 9, 24, 42;
  --shade-rgb: 5, 15, 28;
  --accent-rgb: 255, 209, 102;
  --glow-rgb: 255, 190, 70;
  --line-rgb: 250, 225, 160;
  --surface: #10304f;
  --screen-bg: #06121f;
  --accent: #ffd166;
  --accent-strong: #f7b93b;
  --title: #fff0bf;
  --highlight: #ffe08a;
  --btn-a: #ffeab0;
  --btn-b: #f7b93b;
  --on-accent: #0b1d33;
}

/* Bawangaja at dawn in the Satpura hills — slate with sunlit apricot */
[data-theme="bawangaja"] {
  --bg-rgb: 20, 23, 32;
  --ink-rgb: 20, 23, 33;
  --shade-rgb: 11, 13, 19;
  --accent-rgb: 246, 190, 140;
  --glow-rgb: 240, 165, 110;
  --line-rgb: 235, 205, 175;
  --surface: #262b3b;
  --screen-bg: #0b0d13;
  --accent: #f6be8c;
  --accent-strong: #eea26a;
  --title: #fff0de;
  --highlight: #f9d3ae;
  --btn-a: #ffeedd;
  --btn-b: #eea26a;
  --on-accent: #1a1c26;
}

/* Muktagiri under the full moon — night blue with a silver waterfall */
[data-theme="muktagiri"] {
  --bg-rgb: 11, 16, 30;
  --ink-rgb: 11, 16, 32;
  --shade-rgb: 5, 8, 18;
  --accent-rgb: 196, 214, 247;
  --glow-rgb: 160, 190, 245;
  --line-rgb: 200, 214, 240;
  --surface: #18223d;
  --screen-bg: #070b16;
  --accent: #c4d6f7;
  --accent-strong: #9fb9ec;
  --title: #eef3ff;
  --highlight: #d6e3fb;
  --btn-a: #eef3ff;
  --btn-b: #9fb9ec;
  --on-accent: #0b1224;
}

/* Sonagiri at twilight — deep wine with lotus pink */
[data-theme="sonagiri"] {
  --bg-rgb: 31, 9, 28;
  --ink-rgb: 30, 9, 28;
  --shade-rgb: 18, 5, 17;
  --accent-rgb: 255, 158, 192;
  --glow-rgb: 255, 122, 168;
  --line-rgb: 255, 200, 220;
  --surface: #36122f;
  --screen-bg: #140511;
  --accent: #ff9ec0;
  --accent-strong: #ff7aa8;
  --title: #ffdbe8;
  --highlight: #ffbcd4;
  --btn-a: #ffdbe8;
  --btn-b: #ff7aa8;
  --on-accent: #2a0a24;
}

/* Mangi-Tungi in the monsoon — deep teal with rain-washed mint */
[data-theme="mangitungi"] {
  --bg-rgb: 6, 29, 31;
  --ink-rgb: 6, 28, 30;
  --shade-rgb: 3, 17, 19;
  --accent-rgb: 127, 227, 200;
  --glow-rgb: 80, 210, 178;
  --line-rgb: 170, 232, 214;
  --surface: #0e3336;
  --screen-bg: #031113;
  --accent: #7fe3c8;
  --accent-strong: #4fd1b0;
  --title: #d2f7ea;
  --highlight: #a6eed9;
  --btn-a: #cff8ea;
  --btn-b: #4fd1b0;
  --on-accent: #042220;
}

/* Hastinapur at dawn — violet with soft lavender */
[data-theme="hastinapur"] {
  --bg-rgb: 22, 16, 44;
  --ink-rgb: 22, 16, 46;
  --shade-rgb: 12, 9, 28;
  --accent-rgb: 199, 168, 255;
  --glow-rgb: 170, 140, 245;
  --line-rgb: 215, 198, 250;
  --surface: #261d4d;
  --screen-bg: #0c0820;
  --accent: #c7a8ff;
  --accent-strong: #a98bf5;
  --title: #efe4ff;
  --highlight: #d9c6ff;
  --btn-a: #e9ddff;
  --btn-b: #a98bf5;
  --on-accent: #160f30;
}

/* Kundalpur at sunset — dark crimson with vermilion */
[data-theme="kundalpur"] {
  --bg-rgb: 36, 9, 13;
  --ink-rgb: 36, 9, 13;
  --shade-rgb: 22, 5, 8;
  --accent-rgb: 255, 128, 96;
  --glow-rgb: 245, 92, 60;
  --line-rgb: 255, 188, 160;
  --surface: #3d1217;
  --screen-bg: #170406;
  --accent: #ff8060;
  --accent-strong: #f45d3f;
  --title: #ffd6c6;
  --highlight: #ffb095;
  --btn-a: #ffd6c4;
  --btn-b: #f45d3f;
  --on-accent: #2a080c;
}

/* Shri Mahavirji on a golden afternoon — dark sienna with sandstone ivory */
[data-theme="mahavirji"] {
  --bg-rgb: 26, 15, 8;
  --ink-rgb: 26, 15, 8;
  --shade-rgb: 15, 9, 5;
  --accent-rgb: 241, 217, 168;
  --glow-rgb: 240, 190, 110;
  --line-rgb: 245, 222, 180;
  --surface: #33200f;
  --screen-bg: #120a05;
  --accent: #f1d9a8;
  --accent-strong: #e6bf7a;
  --title: #fff1d4;
  --highlight: #f6dfb0;
  --btn-a: #fff1d4;
  --btn-b: #e6bf7a;
  --on-accent: #22140a;
}

/* Swasti Dham, Jahazpur at blue hour — deep night blue with azure */
[data-theme="jahazpur"] {
  --bg-rgb: 6, 20, 34;
  --ink-rgb: 6, 20, 36;
  --shade-rgb: 3, 11, 20;
  --accent-rgb: 114, 196, 255;
  --glow-rgb: 80, 170, 255;
  --line-rgb: 170, 215, 250;
  --surface: #0f2a45;
  --screen-bg: #030c16;
  --accent: #72c4ff;
  --accent-strong: #4aaef5;
  --title: #e2f3ff;
  --highlight: #aee0ff;
  --btn-a: #d8f0ff;
  --btn-b: #4aaef5;
  --on-accent: #051626;
}

/* Khajuraho at golden hour — dark rosewood with sandstone rose */
[data-theme="khajuraho"] {
  --bg-rgb: 34, 14, 20;
  --ink-rgb: 34, 14, 21;
  --shade-rgb: 20, 8, 12;
  --accent-rgb: 255, 176, 154;
  --glow-rgb: 244, 140, 116;
  --line-rgb: 248, 200, 184;
  --surface: #3a1a24;
  --screen-bg: #13070b;
  --accent: #ffb09a;
  --accent-strong: #f48c74;
  --title: #ffeae2;
  --highlight: #ffcdbd;
  --btn-a: #ffe8df;
  --btn-b: #f48c74;
  --on-accent: #220e14;
}

/* Chandkheri at sunrise over mustard fields — dark olive with mustard-lime */
[data-theme="chandkheri"] {
  --bg-rgb: 19, 22, 8;
  --ink-rgb: 19, 22, 9;
  --shade-rgb: 11, 13, 4;
  --accent-rgb: 207, 227, 106;
  --glow-rgb: 190, 215, 70;
  --line-rgb: 225, 235, 170;
  --surface: #262d10;
  --screen-bg: #0b0d04;
  --accent: #cfe36a;
  --accent-strong: #b5d23f;
  --title: #f3f8cf;
  --highlight: #e1ee9a;
  --btn-a: #eef6c4;
  --btn-b: #b5d23f;
  --on-accent: #161a07;
}

/* Champapuri at dawn on the Ganga — warm charcoal with copper */
[data-theme="champapuri"] {
  --bg-rgb: 22, 17, 15;
  --ink-rgb: 22, 17, 15;
  --shade-rgb: 12, 9, 8;
  --accent-rgb: 240, 168, 120;
  --glow-rgb: 235, 140, 90;
  --line-rgb: 245, 200, 170;
  --surface: #2d221d;
  --screen-bg: #0c0908;
  --accent: #f0a878;
  --accent-strong: #e38a55;
  --title: #ffe0c9;
  --highlight: #f7c4a2;
  --btn-a: #ffdcc4;
  --btn-b: #e38a55;
  --on-accent: #1e1410;
}

/* Moodbidri on a monsoon evening — deep emerald with lamp-lit green */
[data-theme="moodbidri"] {
  --bg-rgb: 5, 22, 16;
  --ink-rgb: 5, 22, 17;
  --shade-rgb: 3, 13, 9;
  --accent-rgb: 95, 212, 156;
  --glow-rgb: 60, 200, 140;
  --line-rgb: 170, 230, 200;
  --surface: #0d3325;
  --screen-bg: #03100b;
  --accent: #5fd49c;
  --accent-strong: #34c283;
  --title: #d6f7e6;
  --highlight: #9fe8c3;
  --btn-a: #cdf5e1;
  --btn-b: #34c283;
  --on-accent: #04190f;
}