/* Black + gold theme. Loaded AFTER the built app CSS so it overrides the tokens. */

/* Flag emoji font: Windows/desktop Chrome renders 🇪🇬 as the letters "EG"
   because it has no flag glyphs. This color font supplies them. The unicode-range
   restricts it to the flag codepoints only, so it never touches any other text —
   prepending it to a font stack is always safe. Applied to body via the small
   script in index.html so raw flag emoji (e.g. the language switcher) render. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  src: url("/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}
/* Prepend the flag font to the app's font variables so flags render as flags
   everywhere (body, font-sans, font-mono — including the language switcher),
   not just on body. unicode-range keeps it to flag glyphs, so Outfit/Space Mono
   still drive all normal text. */
:root {
  --app-font-sans: "Twemoji Country Flags", "Outfit", sans-serif;
  --app-font-mono: "Twemoji Country Flags", "Space Mono", monospace;
}

:root,
[data-theme="dark"] {
  --background: 0 0% 4%;
  --foreground: 0 30% 96%;

  --card: 0 0% 6.5%;
  --card-foreground: 0 30% 96%;
  --card-border: 0 22% 16%;

  --popover: 0 0% 7%;
  --popover-foreground: 0 30% 96%;
  --popover-border: 0 22% 18%;

  /* FFD700 bright gold — primary/secondary/accent share it so every action reads
     with the same weight. Text on gold is the deep-brown 6B3500 family. */
  --primary: 0 100% 50%;
  --primary-foreground: 0 0% 10%;

  --secondary: 0 100% 50%;
  --secondary-foreground: 0 0% 10%;

  --accent: 0 100% 50%;
  --accent-foreground: 0 0% 10%;

  --muted: 0 0% 12%;
  --muted-foreground: 0 10% 62%;

  --destructive: 4 72% 52%;
  --destructive-foreground: 0 30% 96%;

  --border: 0 16% 14%;
  --input: 0 16% 18%;
  --ring: 0 100% 50%;

  --radius: 0.75rem;

  --shadow-xs: 0 1px 2px 0 #00000059;
  --shadow-sm: 0 2px 6px -1px #00000066, 0 1px 2px -1px #0000004d;
  --shadow: 0 4px 12px -2px #00000073, 0 2px 4px -2px #00000059;
  --shadow-md: 0 8px 20px -4px #0000007a, 0 3px 6px -3px #00000059;
  --shadow-lg: 0 16px 36px -8px #00000085, 0 6px 12px -6px #00000066;
  --shadow-xl: 0 28px 60px -12px #0000008f, 0 10px 20px -10px #00000073;
}

[data-theme="light"] {
  /* Warm off-white so the gold has something to sit against instead of glaring. */
  --background: 0 30% 96%;
  --foreground: 0 12% 12%;

  --card: 0 40% 99%;
  --card-foreground: 0 12% 12%;
  --card-border: 0 22% 84%;

  --popover: 0 40% 99%;
  --popover-foreground: 0 12% 12%;
  --popover-border: 0 22% 84%;

  /* Deeper gold (D99000 family) so white text on it stays legible. */
  --primary: 0 100% 42%;
  --primary-foreground: 0 0% 10%;

  --secondary: 0 100% 42%;
  --secondary-foreground: 0 0% 10%;

  --accent: 0 100% 42%;
  --accent-foreground: 0 0% 10%;

  --muted: 0 24% 91%;
  --muted-foreground: 0 10% 38%;

  --border: 0 20% 82%;
  --input: 0 20% 78%;
  --ring: 0 100% 42%;

  --shadow-xs: 0 1px 2px 0 #2a1f0a14;
  --shadow-sm: 0 2px 6px -1px #2a1f0a1f, 0 1px 2px -1px #2a1f0a14;
  --shadow: 0 4px 12px -2px #2a1f0a24, 0 2px 4px -2px #2a1f0a1a;
  --shadow-md: 0 8px 20px -4px #2a1f0a29, 0 3px 6px -3px #2a1f0a1f;
  --shadow-lg: 0 16px 36px -8px #2a1f0a2e, 0 6px 12px -6px #2a1f0a24;
  --shadow-xl: 0 28px 60px -12px #2a1f0a33, 0 10px 20px -10px #2a1f0a29;
}

/* Typography: a display face for headings, the app sans for body. */
@font-face {
  font-family: "JK Display";
  src: local("Playfair Display"), local("Georgia"), local("Times New Roman");
  font-display: swap;
}
h1, h2, .font-display {
  font-family: "JK Display", Georgia, serif;
  letter-spacing: -0.01em;
}

.border, [class*="border-border"] {
  border-color: hsl(var(--border));
}

/* Buttons: a subtle metallic gold gradient rather than a flat fill. */
.bg-primary,
.bg-secondary,
.bg-accent {
  background-image: linear-gradient(180deg, hsl(0 100% 54%), hsl(0 100% 46%));
}

/* Brand wordmark (e.g. "SMS" in VegaSMS) uses the deep gold; the rest stays bright. */
.jk-brand-gold { color: hsl(0 100% 46%) !important; }
:root[data-theme="light"] .jk-brand-gold { color: hsl(0 100% 34%) !important; }

/* Light theme keeps the darker gold so text on it stays readable. */
[data-theme="light"] .bg-primary,
[data-theme="light"] .bg-secondary,
[data-theme="light"] .bg-accent,
[data-theme="light"] header a[href="/register"] > button {
  background-image: linear-gradient(180deg, hsl(0 100% 55%), hsl(0 100% 40%)) !important;
  color: hsl(0 0% 10%) !important;
}

/* ---- light theme polish ---- */
[data-theme="light"] .jk-card,
[data-theme="light"] [class*="bg-card"] {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--card-border)) !important;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .hidden.md\:block.w-64.h-screen.fixed {
  background: hsl(0 28% 92%) !important;
  border-inline-start: 1px solid hsl(0 22% 80%);
}
[data-theme="light"] .hidden.md\:block.w-64 a {
  background-color: transparent !important;
  color: hsl(0 12% 30%) !important;
}
[data-theme="light"] .hidden.md\:block.w-64 a:hover {
  background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent) !important;
}
[data-theme="light"] .hidden.md\:block.w-64 a[class*="bg-primary/"],
[data-theme="light"] .hidden.md\:block.w-64 a[aria-current] {
  background-color: color-mix(in oklab, hsl(var(--primary)) 18%, transparent) !important;
  color: hsl(0 100% 30%) !important;
  font-weight: 600;
}
[data-theme="light"] button[class*="bg-primary/1"],
[data-theme="light"] button[class*="bg-accent/1"],
[data-theme="light"] button[class*="bg-secondary/1"] {
  background-color: color-mix(in oklab, hsl(var(--primary)) 13%, transparent) !important;
  border-color: color-mix(in oklab, hsl(var(--primary)) 34%, transparent) !important;
  color: hsl(0 100% 33%) !important;
}
[data-theme="light"] [class*="bg-gradient-to"] {
  background-image: linear-gradient(135deg, hsl(0 40% 98%), hsl(0 30% 94%)) !important;
}
/* Accent text needs to be darker than the dark-theme gold to stay legible on light. */
[data-theme="light"] .text-primary,
[data-theme="light"] .text-secondary,
[data-theme="light"] .text-accent {
  color: hsl(0 100% 40%) !important;
}
[data-theme="light"] .jk-eye,
[data-theme="light"] #jkHumanCheck {
  background: hsl(0 34% 97%) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(0 12% 25%) !important;
}
[data-theme="light"] * {
  scrollbar-color: hsl(0 40% 62%) transparent;
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: hsl(0 35% 68%);
  background-clip: content-box;
}

/* Old theme glowed cyan on several elements; neutralise those to quiet shadows. */
[class*="shadow-[0_0_"] {
  box-shadow: var(--shadow-md) !important;
}

/* ---- washed-out actions → full strength gold ---- */
button.bg-primary\/90,
button.bg-secondary\/90,
button.bg-accent\/90,
a.bg-primary\/90,
a.bg-secondary\/90,
a.bg-accent\/90 {
  opacity: 1 !important;
  background-color: hsl(var(--primary)) !important;
  background-image: linear-gradient(180deg, hsl(0 100% 54%), hsl(0 100% 46%)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
button[class*="bg-primary/1"]:not([class*="bg-primary/100"]),
button[class*="bg-primary/5"]:not([class*="bg-primary/50"]),
button[class*="bg-accent/1"]:not([class*="bg-accent/100"]),
button[class*="bg-secondary/1"]:not([class*="bg-secondary/100"]),
a[class*="bg-primary/1"]:not([class*="bg-primary/100"]),
a[class*="bg-accent/1"]:not([class*="bg-accent/100"]) {
  opacity: 1 !important;
  background-color: color-mix(in oklab, hsl(var(--primary)) 16%, transparent) !important;
  border-color: color-mix(in oklab, hsl(var(--primary)) 45%, transparent) !important;
  color: hsl(var(--primary)) !important;
}

/* Dark scrollbars, gold-tinted. */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(0 48% 34%) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: hsl(0 40% 26%);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: hsl(0 95% 50%);
  background-clip: content-box;
}

::selection {
  background: hsl(0 100% 50% / 0.3);
}