/* Brand color tokens (@theme) live in app/assets/tailwind/application.css —
   that is the file Tailwind compiles, so the brand utilities generate there.
   This file holds plain custom CSS (served alongside the compiled utilities). */

body {
  background-color: #172a40;
  color: #ffffff;
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #b8860b, #d4a847, #b8860b, transparent);
  margin: 2rem 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
input[type="time"],
textarea,
select {
  background-color: #16273d;
  border: 1px solid #2a2a42;
  color: #ffffff;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

input::placeholder,
textarea::placeholder {
  color: #5e6b7d;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #b8860b;
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.3);
}

/* ---- Brand gradients (see brand/BRAND.md) ---- */

/* Header / nav bar: navy → indigo → navy */
.bg-brand-header {
  background: linear-gradient(90deg, #0d2137 0%, #172a40 50%, #0d2137 100%);
}

/* Deep cinematic field for hero / feature panels */
.bg-brand-deep {
  background: linear-gradient(160deg, #172a40 0%, #0d2137 58%, #0a1828 100%);
}

/* Cinematic dark overlay for photo heroes (no colour cast, just depth) */
.hero-scrim {
  background: linear-gradient(160deg, rgba(23, 42, 64, 0.82) 0%, rgba(13, 33, 55, 0.90) 55%, rgba(10, 20, 35, 0.97) 100%);
}

/* Soft gold radial glow (overlay layer) */
.glow-gold {
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(184, 134, 11, 0.22), transparent 70%);
}

/* Gold gradient text (display headings) — same gold family as the buttons */
.text-gold-gradient {
  background: linear-gradient(95deg, #c9a13a 0%, #f0d684 50%, #c9a13a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Premium metallic gold for solid accent buttons.
   A flat #b8860b reads as mustard; the light→true-gold→deep gradient plus an
   inset top highlight gives brushed-metal sheen. Dark navy text for contrast.
   Applied to btn-gold AND the ~70 bg-brand-green / bg-brand-copper fills
   site-wide in one place (opacity-variant fills handled inline). */
:root {
  /* One gold family, shared by buttons (metal) and headings (text) */
  --gold-metal: linear-gradient(180deg, #ecd279 0%, #c9a13a 46%, #9e7a1f 100%);
  --gold-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.btn-gold,
.bg-brand-green,
.bg-brand-green-light,
.bg-brand-copper {
  color: #1a1a2e !important;
  background-image: var(--gold-metal) !important;
  box-shadow: var(--gold-sheen), 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn-gold:hover,
.bg-brand-green:hover,
.bg-brand-green-light:hover,
.bg-brand-copper:hover {
  filter: brightness(1.06);
  box-shadow: var(--gold-sheen), 0 3px 10px rgba(169, 128, 31, 0.4);
}

/* Thin gold hairline accent (the restrained gold) */
.rule-gold {
  height: 1px;
  background: linear-gradient(to right, transparent, #b8860b, transparent);
}