/* =====================================================================
   KRONA WEBSITE THEMES
   The live theme is chosen in the admin panel: Update Website → Website Theme
   (or ask for it by name). Themes change colors only; every feature stays the same.

   Each color is three numbers: red green blue (0–255). To adjust a theme, change
   the numbers here. To add a theme, copy a block, give it a new data-theme name,
   and add the same name to THEMES in public/index.html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   "Krona Ember" — matches the logo: deep black ink with burnt-orange accents
   --------------------------------------------------------------------- */
:root,
[data-theme="krona-ember"] {
  /* page backgrounds, light to darker */
  --ivory: 250 249 247;
  --sand: 243 239 234;
  --stonewarm: 231 224 216;
  /* text and dark surfaces (header bar, buttons, footer) */
  --espresso: 20 20 20;
  --charcoal: 38 38 38;
  /* brand accent: labels, highlights, chart bars */
  --gold: 200 85 43;
  --gold-dark: 166 63 20;
  --gold-light: 235 181 154;
  /* call-to-action buttons, badges and highlights */
  --amber-50: 253 243 238;
  --amber-100: 251 227 214;
  --amber-200: 246 198 172;
  --amber-300: 245 154 110;
  --amber-400: 232 112 63;
  --amber-500: 217 96 47;
  --amber-700: 168 67 27;
  --amber-800: 138 53 22;
  --amber-900: 110 42 18;
  --amber-950: 61 22 10;
}

/* ---------------------------------------------------------------------
   "Classic Gold" — the original look: espresso brown with warm gold
   --------------------------------------------------------------------- */
[data-theme="classic-gold"] {
  --ivory: 250 248 245;
  --sand: 242 236 225;
  --stonewarm: 230 222 200;
  --espresso: 28 25 23;
  --charcoal: 41 37 36;
  --gold: 180 138 78;
  --gold-dark: 142 104 48;
  --gold-light: 216 188 142;
  --amber-50: 255 251 235;
  --amber-100: 254 243 199;
  --amber-200: 253 230 138;
  --amber-300: 252 211 77;
  --amber-400: 251 191 36;
  --amber-500: 245 158 11;
  --amber-700: 180 83 9;
  --amber-800: 146 64 14;
  --amber-900: 120 53 15;
  --amber-950: 69 26 3;
}

/* ---------------------------------------------------------------------
   "Glass Bound" — soft lavender and white with frosted-glass surfaces
   (Apple-style glass, kept minimal). Colors, then the few glass rules.
   --------------------------------------------------------------------- */
[data-theme="glass-bound"] {
  --ivory: 248 247 253;
  --sand: 240 237 252;
  --stonewarm: 226 220 248;
  --espresso: 27 24 48;
  --charcoal: 45 41 74;
  --gold: 112 72 232;
  --gold-dark: 91 52 204;
  --gold-light: 196 181 253;
  --amber-50: 245 243 255;
  --amber-100: 237 233 254;
  --amber-200: 221 214 254;
  --amber-300: 196 181 253;
  --amber-400: 167 139 250;
  --amber-500: 139 92 246;
  --amber-700: 109 40 217;
  --amber-800: 91 33 182;
  --amber-900: 76 29 149;
  --amber-950: 46 16 101;
}

/* soft lavender glow behind the page, so the glass has something to blur */
[data-theme="glass-bound"] body {
  background:
    radial-gradient(56rem 36rem at 90% -8%, rgb(196 181 253 / .45), transparent 62%),
    radial-gradient(48rem 34rem at -12% 38%, rgb(221 214 254 / .6), transparent 62%),
    rgb(var(--ivory));
  background-attachment: fixed;
}
[data-theme="glass-bound"] #view-home > div:first-child {
  background: transparent;
  border-color: transparent;
}

/* frosted header and cards */
[data-theme="glass-bound"] header.sticky {
  background-color: rgb(255 255 255 / .6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-color: rgb(255 255 255 / .75);
}
[data-theme="glass-bound"] main :is(.bg-white, .bg-sand).rounded-2xl {
  background-color: rgb(255 255 255 / .62);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: rgb(255 255 255 / .85);
  box-shadow: 0 10px 30px -12px rgb(76 29 149 / .16), inset 0 1px 0 rgb(255 255 255 / .9);
}
[data-theme="glass-bound"] main .rounded-2xl { border-radius: 1.5rem; }
[data-theme="glass-bound"] main .bg-white.rounded-xl { background-color: rgb(255 255 255 / .7); }

/* main buttons: violet pills */
[data-theme="glass-bound"] button.bg-espresso.text-white {
  background-color: rgb(var(--gold));
  border-radius: 9999px;
  box-shadow: 0 6px 16px -6px rgb(var(--gold) / .55);
}
[data-theme="glass-bound"] button.bg-espresso.text-white:hover { background-color: rgb(var(--gold-dark)); }
[data-theme="glass-bound"] main button.rounded-xl { border-radius: 9999px; }