/* Local storefront theme. Loaded after the generated application stylesheet. */
:root,
.on-dark {
  color-scheme: dark;
  --bg: 8 19 38;
  --bg-2: 13 31 54;
  --card: 18 42 65;
  --text: 237 247 250;
  --text-dim: 157 184 201;
  --border: 43 79 99;
  --gold: 45 212 191;
  --gold-bright: 153 246 228;
  --gold-ink: 94 234 212;
  --ember: 45 212 191;
  --orange: 94 234 212;
  --maroon: 8 19 38;
  --maroon-2: 13 31 54;
  --leaf: 45 212 191;
}

body {
  background: linear-gradient(135deg, #081326, #0d2338);
  color: rgb(var(--text));
}

/* Bring the fixed hero, navigation and footer surfaces into the ocean palette. */
section.min-h-\[100svh\] {
  background: #103b58 !important;
}
/* The hero has its own opaque background layer above the section surface. */
section.min-h-\[100svh\] > .absolute.inset-0[style] {
  background:
    radial-gradient(ellipse at 80% 25%, rgb(45 212 191 / .32), transparent 60%),
    radial-gradient(ellipse at 15% 75%, rgb(56 189 248 / .2), transparent 55%),
    linear-gradient(125deg, #173b68 0%, #12516a 55%, #11776f 100%) !important;
}
section.min-h-\[100svh\] > .absolute.inset-0.bg-gradient-to-t {
  background-image: linear-gradient(0deg, rgb(8 19 38 / .3), transparent 45%, rgb(8 19 38 / .08));
}
header, nav {
  --maroon: 8 19 38;
  --maroon-2: 13 31 54;
}
header [style*="linear-gradient"],
nav [style*="linear-gradient"] {
  background: linear-gradient(180deg, #122a43, #081326) !important;
}
section#about {
  background: linear-gradient(180deg, #081326, #10334b 50%, #081326) !important;
}
footer[style] {
  background: linear-gradient(180deg, #0b2035, #061223) !important;
}
.text-black { color: #081326; }
.bg-\[\#FFC107\], .bg-\[\#B71C1C\] {
  background-color: #2dd4bf;
  color: #081326;
}

::selection { background: #2dd4bf; color: #081326; }
:focus-visible { outline-color: #99f6e4; }
input, select, textarea { accent-color: #2dd4bf; }
input::placeholder, textarea::placeholder { color: #9db8c9; }

/* Cover fixed light surfaces in the compiled utility palette. */
.bg-white, .bg-white\/80, .bg-\[\#FFF8E1\] {
  background-color: rgb(var(--card));
}
.text-\[\#B71C1C\], .text-\[\#B07A08\], .text-\[\#FFC107\] {
  color: #5eead4;
}
.border-\[\#B71C1C\], .border-\[\#B71C1C\]\/30 {
  border-color: #2dd4bf66;
}
.bg-\[\#B71C1C\]\/10 { background-color: #2dd4bf14; }
.from-\[\#B71C1C\] {
  --tw-gradient-from: #155e75 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(21 94 117 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#d32f2f\], .to-\[\#E53935\] {
  --tw-gradient-to: #0e314e var(--tw-gradient-to-position);
}
.from-\[\#FFC107\] {
  --tw-gradient-from: #99f6e4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(153 246 228 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#FF6D00\] { --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position); }

/* Teal accent buttons need dark lettering for accessible contrast. */
:is(button, a).bg-ember,
:is(button, a).bg-gold,
:is(button, a).bg-orange,
:is(button, a).from-gold {
  color: #081326;
}
:is(button, a).hover\:bg-ember\/90:hover,
:is(button, a).hover\:bg-orange:hover,
:is(button, a).focus\:bg-gold:focus {
  color: #081326;
}
.shadow-ember {
  --tw-shadow-color: rgb(45 212 191 / .18);
  --tw-shadow: 0 8px 24px -12px rgb(45 212 191 / .18);
}