/* ============================================================================
   جولد كار · GOLD CAR — MAIN BRAND STYLESHEET  (single source of truth)
   ----------------------------------------------------------------------------
   EDIT THIS ONE FILE to restyle the ENTIRE website (every guest + dc page).
   It is a plain static file: changes go live on refresh, NO build/npm needed.

   How it works:
   • Colours are defined ONCE below as RGB channels (e.g. --dc-green-rgb).
   • Both Tailwind engines (the compiled app.css for dc pages, and the CDN
     runtime for the legacy guest pages) map their dc-* colours to these
     channels — so utility classes like  bg-dc-green / text-dc-navy /
     bg-dc-green/20  all read from here.
   • The component classes (.dc-btn, .dc-input, .dc-eyebrow…) and every bespoke
     rule use the var(--dc-*) tokens — so they read from here too.

   ➜ Want a different brand gold?  Change --dc-green-rgb once. Done, sitewide.

   NOTE ON THE TOKEN NAMES: the dc-* names are neutral design tokens, kept
   verbatim so that 2,986 existing classes keep working. Read them by ROLE,
   not by the colour word in the name: "green" = the primary brand accent
   (now GOLD), "navy" = the dark ink, "forest" = the AA-safe deep-gold text.

   ACCESSIBILITY (WCAG 2.1 AA) — non-negotiable:
   • #C8A45A (--dc-green) with WHITE text is 2.36:1 and FAILS. Primary buttons
     are gold background + --dc-navy (#2E2E2E) text = 5.76:1 ✅.
   • Gold at body text size on the ivory surface is 2.26:1 — FORBIDDEN.
     Use --dc-forest (#8A6024, 5.33:1) for gold-coloured TEXT.
   • In-text links / focus rings use --dc-green-hover (#A77B2D, 3.65:1) and
     must be underlined.
   ============================================================================ */

:root {
  /* ---- COLOUR CHANNELS (space-separated R G B) — the master knobs --------- */
  /* "navy" is the neutral DARK INK role — used for dark surfaces + body text.
     It is intentionally far darker than the bright brand --dc-green so that
     gold CTAs, links and accents POP against the dark bands (instead of
     blending in), and so that gold surfaces can carry dark ink at AA. */
  --dc-navy-rgb:        46 46 46;     /* charcoal #2E2E2E — body ink / dark surfaces */
  --dc-navy-700-rgb:    17 17 17;     /* midnight #111111 — pressed / deepest ink */
  --dc-navy-500-rgb:    107 107 107;  /* ink-muted #6B6B6B — secondary text (5.11:1) */
  --dc-green-rgb:       200 164 90;   /* GOLD #C8A45A — CTA surface, identity  */
  --dc-green-hover-rgb: 167 123 45;   /* gold-deep #A77B2D — hover/press, borders, focus */
  --dc-forest-rgb:      138 96 36;    /* deep gold #8A6024 — AA-safe gold TEXT (5.33:1) */
  --dc-white-rgb:       252 250 246;  /* ivory #FCFAF6 — page surface          */
  --dc-mist-rgb:        215 215 215;  /* pearl #D7D7D7 — borders / dividers    */
  --dc-mist-deep-rgb:   184 184 184;  /* #B8B8B8 — input borders, empty stars  */
  --dc-danger-rgb:      163 42 30;    /* errors / destructive (6.93:1)         */
  --dc-warning-rgb:     168 122 30;   /* star ratings — kept: 3.68:1 clears 1.4.11 */
  --dc-info-rgb:        107 107 107;  /* ink-muted #6B6B6B                     */

  /* ---- COLOUR TOKENS (derived — use these in var() CSS) ------------------- */
  --dc-navy:        rgb(var(--dc-navy-rgb));
  --dc-navy-700:    rgb(var(--dc-navy-700-rgb));
  --dc-navy-500:    rgb(var(--dc-navy-500-rgb));
  --dc-green:       rgb(var(--dc-green-rgb));
  --dc-green-hover: rgb(var(--dc-green-hover-rgb));
  --dc-forest:      rgb(var(--dc-forest-rgb));
  --dc-white:       rgb(var(--dc-white-rgb));
  --dc-mist:        rgb(var(--dc-mist-rgb));
  --dc-mist-deep:   rgb(var(--dc-mist-deep-rgb));
  --dc-danger:      rgb(var(--dc-danger-rgb));
  --dc-warning:     rgb(var(--dc-warning-rgb));
  --dc-success:     var(--dc-green);
  --dc-info:        var(--dc-navy-500);

  /* ---- TYPE -------------------------------------------------------------- */
  --dc-font-brand: 'Readex Pro', 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;

  /* ---- RADIUS / SHADOW --------------------------------------------------- */
  --dc-radius: 4px;                   /* the Gold Car house corner (not pillowy) */
  --dc-shadow-sm: 0 1px 2px 0 rgb(var(--dc-navy-rgb) / 0.08);
  --dc-shadow:    0 2px 6px -1px rgb(var(--dc-navy-rgb) / 0.10);
  --dc-shadow-md: 0 6px 16px -4px rgb(var(--dc-navy-rgb) / 0.12);
  --dc-shadow-lg: 0 16px 32px -8px rgb(var(--dc-navy-rgb) / 0.14);

  /* ---- MOTION ------------------------------------------------------------ */
  --dc-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dc-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dc-ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:  var(--dc-ease-expo);   /* legacy aliases kept working */
  --ease-out-quart: var(--dc-ease-quart);
  --dc-dur-micro: 150ms;
  --dc-dur-ui:    300ms;
  --dc-dur-page:  600ms;
}

/* ============================================================================
   BASE
   ============================================================================ */
/* AA: dark ink on the gold selection band = 13.03:1 (ivory would be 2.26:1). */
::selection { background-color: var(--dc-green); color: var(--dc-navy); }

/* Fixed brand watermark — a subtle, semi-transparent logo sitting in the
   background of every page (behind all content). Adjust --dc-wm-opacity /
   --dc-wm-size here to tune it. */
:root { --dc-wm-opacity: 0.07; --dc-wm-size: min(46vw, 460px); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/dc/logo.png');
  background-repeat: no-repeat;
  background-position: center 44%;
  background-size: var(--dc-wm-size);
  opacity: var(--dc-wm-opacity);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 640px) { :root { --dc-wm-size: 64vw; } }

/* Visible gold focus ring for keyboard users (survives layouts that reset
   the global outline). Uses --dc-green-hover (#A77B2D, 3.65:1) — plain gold
   would be 2.26:1 and fail WCAG 1.4.11 non-text contrast. */
.dc-focus:focus-visible,
a.dc-focus:focus-visible,
button.dc-focus:focus-visible {
  outline: 2px solid var(--dc-green-hover) !important;
  outline-offset: 3px !important;
  border-radius: var(--dc-radius);
}

/* ============================================================================
   COMPONENT CLASSES  (plain CSS — work on every page, no build)
   ============================================================================ */
/* AA: gold-coloured TEXT must be --dc-forest (5.33:1), never --dc-green. */
.dc-eyebrow {
  font-family: var(--dc-font-brand);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--dc-forest); text-transform: uppercase;
}
.dc-section-marker {
  font-family: var(--dc-font-brand);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--dc-navy-500); text-transform: uppercase;
}

.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-brand); font-weight: 600;
  padding: 0 1.5rem; height: 3rem; min-height: 44px; font-size: 1rem;
  transition: background-color var(--dc-dur-micro) var(--dc-ease-expo),
              color var(--dc-dur-micro) var(--dc-ease-expo),
              box-shadow var(--dc-dur-micro) var(--dc-ease-expo);
}
/* AA: gold bg + dark ink = 5.76:1. Never white/ivory on gold (2.36 / 2.26:1). */
.dc-btn--primary   { background-color: var(--dc-green); color: var(--dc-navy); }
/* AA on hover too: --dc-green-hover (#A77B2D) tops out at 3.65:1 with EITHER
   ink, so the primary button presses to --dc-forest (#8A6024) + ivory = 5.33:1.
   The --dc-green-hover token itself is unchanged for borders/rings/utilities. */
.dc-btn--primary:hover { background-color: var(--dc-forest); color: var(--dc-white); }
.dc-btn--secondary { background-color: transparent; color: var(--dc-navy); border: 1px solid var(--dc-navy); }
.dc-btn--secondary:hover { background-color: var(--dc-mist); }
.dc-btn--ghost     { background-color: transparent; color: var(--dc-navy-500); }
.dc-btn--ghost:hover { color: var(--dc-navy); }
.dc-btn--compact   { height: 2.5rem; padding: 0 1.25rem; font-size: .875rem; }
.dc-btn--hero      { height: 3.5rem; padding: 0 1.75rem; font-size: 1.1875rem; }

.dc-input {
  width: 100%; height: 3rem; padding: 0 1rem;
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-brand); font-size: 1rem;
  background-color: var(--dc-white); color: var(--dc-navy);
  border: 1px solid var(--dc-mist-deep);
  transition: border-color var(--dc-dur-micro) var(--dc-ease-expo),
              box-shadow var(--dc-dur-micro) var(--dc-ease-expo);
}
.dc-input::placeholder { color: var(--dc-navy-500); opacity: .6; }
.dc-input:hover  { border-color: var(--dc-navy-500); }
.dc-input:focus  { border-color: var(--dc-navy); outline: none; }
.dc-input--error { border-color: var(--dc-danger); }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .dc-btn, .dc-input { transition-duration: .01ms; }
}

/* ============================================================================
   SHARED CHROME · GLASS TOKENS · SCENE · HEADER · PROMO · FOOTER
   ----------------------------------------------------------------------------
   Ported here from layouts/dc.blade.php so BOTH the dc homepage layout AND the
   legacy guest layout render the SAME promo strip, sticky glass header and
   layered glass footer over an identical brand "scene" background.
   All colours use the dc-* rgb tokens (no hex). RTL logical props.
   These class names (.promo-strip / .page-header / .page-footer / .header-nav
   /.footer-col …) are bespoke and do not collide with Bootstrap.
   ============================================================================ */

/* ---- Glass + radius tokens (ivory liquid glassmorphism) ---- */
:root {
  --glass-bg-soft:      rgb(var(--dc-white-rgb) / 0.45);
  --glass-bg:           rgb(var(--dc-white-rgb) / 0.62);
  --glass-bg-deep:      rgb(var(--dc-white-rgb) / 0.80);
  --glass-bg-navy:      rgb(var(--dc-navy-rgb) / 0.86);
  --glass-bg-navy-soft: rgb(var(--dc-navy-rgb) / 0.62);
  --glass-border:       rgb(var(--dc-white-rgb) / 0.55);
  --glass-border-soft:  rgb(var(--dc-white-rgb) / 0.35);
  --glass-border-navy:  rgb(var(--dc-white-rgb) / 0.10);
  --glass-blur:         20px;
  --glass-blur-soft:    12px;
  --glass-blur-strong:  32px;
  --glass-sat:          saturate(180%);
  --glass-highlight:    linear-gradient(135deg,
                          rgb(var(--dc-white-rgb) / 0.5) 0%,
                          rgb(var(--dc-white-rgb) / 0) 55%);
  --glass-highlight-on-dark: linear-gradient(135deg,
                          rgb(var(--dc-white-rgb) / 0.12) 0%,
                          rgb(var(--dc-white-rgb) / 0) 60%);
  --glass-shadow-soft:  0 4px 20px rgb(var(--dc-navy-rgb) / 0.06);
  --glass-shadow:       0 12px 40px rgb(var(--dc-navy-rgb) / 0.08);
  --glass-shadow-lift:  0 24px 60px rgb(var(--dc-navy-rgb) / 0.14);

  --radius-pill:        999px;
  --radius-lg:          28px;
  --radius:             20px;
  --radius-sm:          16px;
  --radius-btn:         12px;
}

/* ---- The scene: brand color gradients fixed behind everything ---- */
.dc-scene {
  background:
    radial-gradient(ellipse 75% 55% at 92% -8%,
        rgb(var(--dc-green-rgb) / 0.22), transparent 65%),
    radial-gradient(ellipse 65% 45% at -5% 25%,
        rgb(var(--dc-navy-rgb) / 0.14), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 65%,
        rgb(var(--dc-green-rgb) / 0.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 88% 95%,
        rgb(var(--dc-navy-rgb) / 0.08), transparent 70%),
    rgb(var(--dc-white-rgb));
  background-attachment: fixed;
  min-height: 100vh;
}

/* ============================================================
   PROMO STRIP
   ============================================================ */
.promo-strip {
  background-color: var(--dc-navy);
  color: var(--dc-white);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 10px 24px;
  position: relative;
}
.promo-strip .promo-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* AA: dark ink on the gold pill = 5.76:1 (ivory would be 2.26:1). */
.promo-strip .promo-pill {
  display: inline-block;
  background-color: var(--dc-green);
  color: var(--dc-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  margin-inline-end: 6px;
}
.promo-strip .promo-close {
  position: absolute;
  top: 50%;
  inset-inline-start: 16px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgb(var(--dc-white-rgb) / 0.6);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  transition: color 150ms var(--ease-out-expo);
}
.promo-strip .promo-close:hover { color: var(--dc-white); }
@media (max-width: 640px) {
  .promo-strip { font-size: 12px; padding: 8px 36px; }
  .promo-strip .promo-pill { display: none; }
}

/* ============================================================
   STICKY HEADER + LOGO  (light glass that solidifies on scroll)
   ============================================================ */
.page-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-out-quart) 200ms;
  background: rgb(var(--dc-white-rgb) / 0.55);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
}
.page-header.is-scrolled {
  background: rgb(var(--dc-white-rgb) / 0.82);
  border-bottom-color: rgb(var(--dc-navy-rgb) / 0.08);
}
.page-header .header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px clamp(24px, 6vw, 120px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-header .brand-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 150ms var(--ease-out-expo);
}
.page-header .brand-logo:hover { opacity: 0.85; }
.brand-logo-img {
  display: block;
  width: auto;
  height: clamp(44px, 5vw, 60px);
  max-width: 100%;
}
.brand-logo--footer .brand-logo-img { height: clamp(72px, 8vw, 96px); }

.header-nav {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--dc-navy-500);
}
.header-nav a {
  text-decoration: none;
  transition: color 150ms var(--ease-out-expo);
}
.header-nav a:hover, .header-nav a.is-active { color: var(--dc-navy); }
.header-nav .lang-toggle {
  font-weight: 600;
  font-size: 13px;
  color: var(--dc-navy);
  border: 1px solid var(--dc-mist-deep);
  padding: 6px 12px;
  border-radius: 4px;
}
.header-nav .header-cta {
  font-weight: 600;
  color: var(--dc-navy);
}
@media (max-width: 768px) {
  .header-nav a:not(.lang-toggle):not(.header-cta) { display: none; }
}

/* ============================================================
   FOOTER  (layered glass over the scene)
   ============================================================ */
.page-footer {
  border-top: 1px solid rgb(var(--dc-navy-rgb) / 0.06);
  padding: clamp(48px, 5vw, 80px) clamp(24px, 6vw, 120px) clamp(32px, 4vw, 56px);
  background: rgb(var(--dc-white-rgb) / 0.65);
  backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
  -webkit-backdrop-filter: blur(var(--glass-blur)) var(--glass-sat);
}
.page-footer .footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 5vw, 64px);
  border-bottom: 1px solid var(--dc-mist);
}
.page-footer .footer-brand p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--dc-navy-500);
  margin: 16px 0 24px;
  max-width: 38ch;
}
.page-footer .footer-brand .newsletter { display: flex; gap: 8px; max-width: 360px; }
.page-footer .footer-brand .newsletter input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dc-navy);
  background: rgb(var(--dc-white-rgb) / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgb(var(--dc-white-rgb) / 0.7);
  border-radius: var(--radius-btn);
}
.page-footer .footer-brand .newsletter input:focus { border-color: var(--dc-navy); outline: none; }
.page-footer .footer-brand .newsletter button {
  height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--dc-navy);
  color: var(--dc-white);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out-expo),
              color 150ms var(--ease-out-expo);
}
/* AA: the button flips to gold on hover, so its ink must flip to dark (5.76:1). */
.page-footer .footer-brand .newsletter button:hover {
  background-color: var(--dc-green);
  color: var(--dc-navy);
}
.page-footer .footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-navy-500);
  margin: 0 0 20px;
}
.page-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.page-footer .footer-col a {
  font-size: 15px;
  color: var(--dc-navy);
  text-decoration: none;
  transition: color 150ms var(--ease-out-expo);
}
/* AA: gold-toned link hover uses --dc-forest (5.33:1), not --dc-green (2.26:1). */
.page-footer .footer-col a:hover { color: var(--dc-forest); }
.page-footer .footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(24px, 3vw, 32px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--dc-navy-500);
}
.page-footer .footer-bottom .meta { display: flex; gap: 24px; flex-wrap: wrap; }
.page-footer .footer-bottom a { color: inherit; text-decoration: none; }
.page-footer .footer-bottom a:hover { color: var(--dc-navy); }

/* ---- Footer responsive (mirrors dc layout breakpoints) ---- */
@media (max-width: 1023px) {
  .page-footer .footer-inner { grid-template-columns: 1fr 1fr; }
  .page-footer .footer-brand { grid-column: span 2; }
}
@media (max-width: 640px) {
  .page-footer .footer-inner { grid-template-columns: 1fr; }
  .page-footer .footer-brand { grid-column: 1; }
}

/* ---- Chrome a11y / perf fallbacks ---- */
@media (prefers-reduced-transparency: reduce) {
  .dc-scene { background: rgb(var(--dc-white-rgb)) !important; background-attachment: initial !important; }
  .page-header, .page-footer,
  .page-footer .footer-brand .newsletter input {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .page-header { background: rgb(var(--dc-white-rgb)) !important; }
  .page-footer { background: rgb(var(--dc-white-rgb)) !important; }
}
@media (max-width: 768px) {
  .page-header, .page-footer {
    backdrop-filter: blur(10px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-strip .promo-close,
  .page-header, .page-header .brand-logo,
  .header-nav a,
  .page-footer .footer-brand .newsletter button,
  .page-footer .footer-col a, .page-footer .footer-bottom a {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   GOLDEN NIGHT — sitewide dark mode · html[data-theme="dark"]
   ----------------------------------------------------------------------------
   2026-08-29. The guest site's night theme, matching the "golden night Riyadh"
   look of the blog covers and the in-article car cards (.gc-carcards stage:
   warm near-black #1C1917 + deep gold glow).

   MECHANISM — the dc-* tokens are ROLE channels, so the flip happens here
   once: "navy" (ink role) turns champagne, "white" (surface role) turns warm
   near-black, gold brightens one step so it clears 3:1 on the dark stage.
   Everything reading rgb(var(--dc-*-rgb) / α) — component classes, Tailwind
   utilities on both engines, the glass tokens — follows automatically.
   Components that hardcode "dark band + light literal text" keep explicit
   overrides below so hierarchy never inverts.

   CONTRAST (WCAG 2.1 AA on #161310 / #1C1A18):
     #EDE5D5 ink        ≈ 12.2:1  body text
     #B2A896 muted      ≈  6.3:1  secondary text
     #D2A44C gold       ≈  6.0:1  gold text/large accents (never #A16207 here)
     #E0B55C gold-hover ≈  7.3:1  focus rings, hover borders
   Boot script: layouts stamp data-theme before first paint; explicit choice
   persists in localStorage('gc-theme'), default follows prefers-color-scheme.
   ============================================================================ */
html[data-theme="dark"] {
  /* ---- Channel flip (R G B) ---- */
  --dc-navy-rgb:        237 229 213;  /* ink → champagne #EDE5D5 */
  --dc-navy-700-rgb:    247 242 232;  /* deepest ink → brightest ivory #F7F2E8 */
  --dc-navy-500-rgb:    178 168 150;  /* muted ink → #B2A896 (6.3:1) */
  --dc-green-rgb:       210 164 76;   /* GOLD brightens → #D2A44C */
  --dc-green-hover-rgb: 224 181 92;   /* hover/focus gold → #E0B55C (brighter, not darker) */
  --dc-forest-rgb:      217 169 63;   /* AA gold TEXT on dark → #D9A93F */
  --dc-white-rgb:       22 19 16;     /* surface → warm near-black #161310 */
  --dc-mist-rgb:        61 55 48;     /* dividers → #3D3730 */
  --dc-mist-deep-rgb:   87 78 66;     /* input borders → #574E42 */
  --dc-danger-rgb:      224 122 106;  /* errors readable on dark → #E07A6A */
  --dc-warning-rgb:     210 164 76;
  --dc-info-rgb:        178 168 150;

  /* ---- Roles the order form / admin-token consumers read with fallbacks ---- */
  --dc-surface: #1C1A18;              /* cards / fields */
  --dc-muted:   #B2A896;
  --dc-border:  #574E42;

  /* ---- Shadows: black, never champagne glow ---- */
  --dc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --dc-shadow:    0 2px 6px -1px rgb(0 0 0 / 0.55);
  --dc-shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.6);
  --dc-shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.65);

  /* ---- Glass on the night scene ---- */
  --glass-bg-soft:      rgb(32 28 24 / 0.45);
  --glass-bg:           rgb(32 28 24 / 0.62);
  --glass-bg-deep:      rgb(30 27 23 / 0.85);
  --glass-bg-navy:      rgb(24 21 18 / 0.88);
  --glass-bg-navy-soft: rgb(24 21 18 / 0.64);
  --glass-border:       rgb(237 229 213 / 0.12);
  --glass-border-soft:  rgb(237 229 213 / 0.08);
  --glass-border-navy:  rgb(210 164 76 / 0.16);
  --glass-highlight:    linear-gradient(135deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 55%);
  --glass-highlight-on-dark: linear-gradient(135deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0) 60%);
  --glass-shadow-soft:  0 4px 20px rgb(0 0 0 / 0.35);
  --glass-shadow:       0 12px 40px rgb(0 0 0 / 0.45);
  --glass-shadow-lift:  0 24px 60px rgb(0 0 0 / 0.55);

  color-scheme: dark;               /* native scrollbars, form widgets, kbd UI */
  --dc-wm-opacity: 0.05;            /* brand watermark, quieter at night */
}

/* ---- The night scene: gold showroom glow over warm black ---- */
html[data-theme="dark"] body,
html[data-theme="dark"] .dc-scene {
  background:
    radial-gradient(ellipse 75% 55% at 92% -8%, rgb(210 164 76 / 0.13), transparent 65%),
    radial-gradient(ellipse 65% 45% at -5% 25%, rgb(210 164 76 / 0.05), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 65%, rgb(210 164 76 / 0.06), transparent 70%),
    radial-gradient(ellipse 80% 60% at 88% 95%, rgb(133 100 40 / 0.11), transparent 70%),
    #161310;
  background-attachment: fixed;
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] body,
  html[data-theme="dark"] .dc-scene { background: #161310 !important; }
  html[data-theme="dark"] .page-header,
  html[data-theme="dark"] .page-footer { background: #1A1714 !important; }
}

/* ---- ::selection: gold band works in both, keep dark ink on it ---- */
html[data-theme="dark"] ::selection { background-color: #D2A44C; color: #1C1917; }

/* ---- Chrome: promo strip stays a DARK band (never inverts to a light bar) ---- */
html[data-theme="dark"] .promo-strip {
  background-color: #211C16;
  color: #EDE5D5;
  border-bottom: 1px solid rgb(210 164 76 / 0.18);
}
html[data-theme="dark"] .promo-strip .promo-pill { color: #231C0E; }   /* dark ink on gold */
html[data-theme="dark"] .promo-strip .promo-close { color: rgb(237 229 213 / 0.6); }
html[data-theme="dark"] .promo-strip .promo-close:hover { color: #EDE5D5; }

/* ---- Header/footer glass flips via tokens; only literals need help ---- */
html[data-theme="dark"] .page-header { border-bottom-color: transparent; }
html[data-theme="dark"] .page-header.is-scrolled { border-bottom-color: rgb(237 229 213 / 0.10); }
html[data-theme="dark"] .header-nav .header-login:hover { background-color: var(--dc-navy); color: #17130F; }
html[data-theme="dark"] .page-footer .footer-brand .newsletter input { border-color: rgb(237 229 213 / 0.22); }
html[data-theme="dark"] .page-footer .footer-brand .newsletter input:focus { border-color: var(--dc-green-hover); }

/* ---- Theme toggle (shared by both headers) ---- */
.gc-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--dc-mist-deep);
  background: transparent;
  color: var(--dc-navy);
  cursor: pointer;
  padding: 0;
  transition: background-color 150ms var(--dc-ease-expo),
              border-color 150ms var(--dc-ease-expo),
              color 150ms var(--dc-ease-expo);
}
.gc-theme-toggle:hover { background: rgb(var(--dc-green-rgb) / 0.14); border-color: var(--dc-green-hover); }
.gc-theme-toggle svg { width: 17px; height: 17px; display: block; }
.gc-theme-toggle .gc-tt-sun { display: none; }
.gc-theme-toggle .gc-tt-moon { display: block; }
html[data-theme="dark"] .gc-theme-toggle .gc-tt-sun { display: block; color: #D9A93F; }
html[data-theme="dark"] .gc-theme-toggle .gc-tt-moon { display: none; }

/* ---- Theme switch animation (JS adds .gc-theme-anim for ~350ms on toggle;
        never present at page load, so no first-paint flash) ---- */
html.gc-theme-anim body,
html.gc-theme-anim body * ,
html.gc-theme-anim body *::before,
html.gc-theme-anim body *::after {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.gc-theme-anim body, html.gc-theme-anim body *,
  html.gc-theme-anim body *::before, html.gc-theme-anim body *::after {
    transition: none !important;
  }
}

/* ============================================================
   DARK · legacy guest layer (layouts.guest): Bootstrap surfaces,
   Tailwind literal colour classes, scrollbars, misc widgets.
   Scoped under html[data-theme="dark"] — light mode untouched.
   ============================================================ */
/* Tailwind CDN literal classes (blog & co. use a handful of them) */
html[data-theme="dark"] .bg-white       { background-color: #1C1A18 !important; }
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50    { background-color: #201C18 !important; }
html[data-theme="dark"] .bg-gray-100    { background-color: #26221D !important; }
html[data-theme="dark"] .bg-gray-200    { background-color: #2C2721 !important; }
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900  { color: #EDE5D5 !important; }
html[data-theme="dark"] .text-gray-700  { color: #D8CEBB !important; }
html[data-theme="dark"] .text-gray-600  { color: #C1B6A1 !important; }
html[data-theme="dark"] .text-gray-500  { color: #A99E8A !important; }
html[data-theme="dark"] .text-gray-400  { color: #93897A !important; }
html[data-theme="dark"] .border-gray-100 { border-color: #2A251F !important; }
html[data-theme="dark"] .border-gray-200 { border-color: #332D26 !important; }
html[data-theme="dark"] .border-gray-300 { border-color: #3D362E !important; }
html[data-theme="dark"] .text-\[\#0F2245\] { color: #EDE5D5 !important; }

/* Bootstrap surfaces on layouts.guest pages */
html[data-theme="dark"] .modal-content {
  background-color: #1E1B18; color: #EDE5D5;
  border: 1px solid rgb(237 229 213 / 0.12);
}
html[data-theme="dark"] .modal-header { border-bottom-color: rgb(237 229 213 / 0.10); }
html[data-theme="dark"] .modal-footer { border-top-color: rgb(237 229 213 / 0.10); }
html[data-theme="dark"] .card { background-color: #1C1A18; border-color: #332D26; }
html[data-theme="dark"] .dropdown-menu { background-color: #1E1B18; border-color: #332D26; }
html[data-theme="dark"] .dropdown-item { color: #EDE5D5; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: #26221D; color: #F7F2E8; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #211E1A; color: #EDE5D5; border-color: #574E42;
}
html[data-theme="dark"] .form-control::placeholder { color: #93897A; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color: #26221D; color: #F7F2E8; }
html[data-theme="dark"] .accordion-item { background-color: #1C1A18; border-color: #332D26; }
html[data-theme="dark"] .accordion-button { background-color: #1C1A18; color: #EDE5D5; }
html[data-theme="dark"] .accordion-body { color: #D8CEBB; }
html[data-theme="dark"] .list-group-item { background-color: #1C1A18; color: #EDE5D5; border-color: #332D26; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); }

/* Scrollbars (guest layout paints them light inline) */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1A1714 !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3D3730 !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #574E42 !important; }

/* Marquee banner ads bar (bg set inline from Alpine :style) — keep it a dark band */
html[data-theme="dark"] #promo-banner { background-color: #211C16 !important; }

/* Guest mobile nav (inline-styled with token fallbacks — tokens flip, this
   is just the border sharpening) */
html[data-theme="dark"] .guest-mobile-nav { border-top-color: #332D26; }

/* Legacy template remnants that assume a light page */
html[data-theme="dark"] .gc-empty__ic { background: rgb(210 164 76 / 0.14); color: #D9A93F; }

/* Gold fills carry DARK ink at night (gold is bright on the dark stage):
   the component button + the Tailwind utility combo used by widgets. */
html[data-theme="dark"] .dc-btn--primary { color: #231C0E; }
html[data-theme="dark"] .bg-dc-green { color: #231C0E !important; }
html[data-theme="dark"] .bg-dc-green .fa-bolt,
html[data-theme="dark"] .bg-dc-green i { color: inherit; }

/* Legacy light surfaces that out-specify the token utilities
   (.product from mystyle.css, the review-form shell) */
html[data-theme="dark"] .product { background-color: #1C1A18 !important; }
html[data-theme="dark"] #review .dc-review-shell {
  background-color: #1C1A18; border-color: #332D26;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
}
html[data-theme="dark"] .product .product-body { background-color: #1C1A18; }
html[data-theme="dark"] .m-card { background: #1C1A18; box-shadow: 0 5px 20px rgb(0 0 0 / 0.45); }