/* ==========================================================================
   LUMIZUNO — "Night Field / 夜野" theme layer
   Owned by a6-site. Loads AFTER style.css / pages.css / articles.css and
   only overrides design tokens plus a small number of components.

   The one thing that makes this station recognisable at a glance: the home
   hero is a dark night-sky panel (deep navy gradient + amber lantern glow)
   while the rest of the page stays a warm light paper. Everything else is
   squared off: 0.25–0.75rem corners, 1px hairlines, hard short shadows and
   tabular figures, so the site reads like an outdoor gear field manual.

   All colours live here as custom properties; component rules below only
   reference tokens. No shared stylesheet is edited.
   ========================================================================== */

:root {
  /* ---- paper + ink ---------------------------------------------------- */
  --color-bg: #FAF9F6;
  --color-bg-alt: #F2EFE8;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FBFAF5;
  --color-ink: #1A1A18;
  --color-ink-soft: #4A4A44;
  --color-muted: #8A8A80;

  /* ---- lantern amber -------------------------------------------------- */
  --color-accent: #E8A33D;
  --color-accent-deep: #B87922;
  --color-accent-soft: #F7E3C4;
  --color-accent-wash: #FDF6EC;
  /* deeper amber only for small text on light paper (readable at 11px) */
  --color-accent-ink: #8A5A16;
  --color-warm: #F0C070;

  --color-hairline: rgba(26, 26, 24, 0.10);
  --color-hairline-strong: rgba(26, 26, 24, 0.20);
  --color-highlight: rgba(255, 255, 255, 0.85);

  /* ---- squared geometry ----------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-pill: 0.25rem; /* pills (chips, eyebrows) become squared */

  /* ---- hard, short shadows -------------------------------------------- */
  --shadow-ambient: 0 10px 22px -16px rgba(26, 26, 24, 0.45);
  --shadow-lift: 0 16px 30px -18px rgba(26, 26, 24, 0.5);
  --shadow-inset: 0 0 0 0 transparent;

  /* ---- night field (dark hero + night nav) ---------------------------- */
  --hero-dark-bg: #0E1626;
  --hero-dark-bg-alt: #16233A;
  --hero-ink: #F5F2EA;
  --hero-ink-soft: rgba(245, 242, 234, 0.74);
  --hero-ink-muted: rgba(245, 242, 234, 0.52);
  --hero-line: rgba(232, 163, 61, 0.34);
  --hero-line-soft: rgba(245, 242, 234, 0.14);
  --hero-glow: rgba(232, 163, 61, 0.18);
  --hero-chip-bg: rgba(232, 163, 61, 0.14);
  --hero-frame-bg: rgba(245, 242, 234, 0.10);
  --hero-panel: rgba(14, 22, 38, 0.86);
  --hero-shadow: 0 24px 60px -44px rgba(0, 0, 0, 0.9);

  /* ---- control colours ------------------------------------------------ */
  --nav-bar-bg: #0E1626;
  --btn-icon-on-accent: rgba(26, 26, 24, 0.14);
  --overlay-bg: rgba(250, 249, 246, 0.92);
}

/* ---- base ------------------------------------------------------------- */
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

/* ---- buttons: squared, amber solid, dark label ------------------------ */
.btn {
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.7rem 0.7rem 1.35rem;
  letter-spacing: -0.005em;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: var(--shadow-ambient);
}

.btn-primary:hover {
  background: var(--color-accent-deep);
  color: var(--color-ink);
  box-shadow: var(--shadow-lift);
}

.btn-primary .btn-icon {
  background: var(--btn-icon-on-accent);
  color: var(--color-ink);
}

.btn-icon {
  border-radius: var(--radius-sm);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-ambient);
}

.btn-ghost:hover {
  border-color: var(--color-hairline-strong);
  box-shadow: var(--shadow-lift);
}

.btn-ghost .btn-icon {
  background: var(--color-accent-wash);
  color: var(--color-accent-ink);
}

.btn-ghost:hover .btn-icon {
  background: var(--color-accent-soft);
}

.skip-link {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---- badges / chips: squared with a hairline ------------------------- */
.eyebrow {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-accent-wash);
  color: var(--color-accent-ink);
}

.eyebrow::before {
  border-radius: 0;
  width: 7px;
  height: 7px;
}

.product-spec {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.brand-badge {
  border-radius: var(--radius-sm);
}

/* small amber labels get the deeper amber so they stay legible */
.product-tag,
.bento-index,
.text-accent {
  color: var(--color-accent-ink);
}

/* ---- cards: 1px outline, whisper shadow ------------------------------ */
.bento-card,
.cap-card,
.cert-card,
.product-card,
.why-card,
.dim-card,
.contact-card,
.related-card,
.insight-card,
.table-shell {
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-ambient);
}

.bento-card--accent {
  color: var(--color-ink);
}

.bento-card--accent .bento-desc,
.bento-card--accent .bento-index {
  color: var(--color-ink-soft);
}

/* ---- night navigation bar -------------------------------------------- */
.nav-inner,
.nav-inner.is-scrolled {
  background: var(--nav-bar-bg);
  border-bottom-color: var(--hero-line-soft);
  box-shadow: 0 18px 36px -32px rgba(0, 0, 0, 0.7);
}

.nav-inner .brand-name {
  color: var(--hero-ink);
}

.nav-inner .brand-name span {
  color: var(--color-accent);
}

.nav-inner .brand-mark {
  background: var(--color-accent);
  color: var(--color-ink);
}

.nav-inner .brand-badge {
  background: var(--hero-chip-bg);
  color: var(--color-accent);
  border: 1px solid var(--hero-line);
}

.nav-inner .nav-links a {
  color: var(--hero-ink-soft);
  opacity: 1;
}

.nav-inner .nav-links a:hover,
.nav-inner .nav-links a:focus-visible {
  color: var(--color-accent);
}

.nav-inner .nav-links a::after {
  background: var(--color-accent);
}

/* the nav CTA is a bare .btn-primary in the shared markup: give it the
   full inline-flex button behaviour so the label never wraps */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1;
}

.nav-cta:hover {
  background: var(--color-accent-soft);
}

.nav-overlay {
  background: var(--overlay-bg);
}

/* ---- HOME HERO: the dark night field --------------------------------- */
.hero {
  background-color: var(--hero-dark-bg);
  background-image:
    radial-gradient(120% 90% at 84% 10%, var(--hero-glow) 0%, transparent 58%),
    linear-gradient(158deg, var(--hero-dark-bg) 0%, var(--hero-dark-bg-alt) 100%);
  color: var(--hero-ink);
  border-bottom: 1px solid var(--hero-line-soft);
}

.hero::before {
  background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hero-line), transparent);
  pointer-events: none;
}

.hero .eyebrow {
  background: var(--hero-chip-bg);
  border-color: var(--hero-line);
  color: var(--color-accent);
}

.hero .eyebrow::before {
  background: var(--color-accent);
}

.hero .hero-title {
  color: var(--hero-ink);
}

.hero .hero-title em {
  color: var(--color-accent);
}

.hero .hero-sub {
  color: var(--hero-ink-soft);
}

.hero .hero-proof {
  border-top-color: var(--hero-line-soft);
}

.hero .hero-proof-item {
  color: var(--hero-ink-soft);
}

.hero .hero-proof-item svg {
  color: var(--color-accent);
}

.hero .bezel {
  background: var(--hero-frame-bg);
  box-shadow: none;
}

.hero .bezel-core {
  background: var(--hero-dark-bg-alt);
  box-shadow: var(--hero-shadow);
}

.hero-float {
  background: var(--hero-panel);
  border: 1px solid var(--hero-line-soft);
  color: var(--hero-ink);
  box-shadow: var(--hero-shadow);
}

.hero-float-label,
.hero-float-value small {
  color: var(--hero-ink-muted);
}

.hero-float-value {
  color: var(--color-accent);
}

.hero-float-row span {
  color: var(--hero-ink-soft);
}

/* hero CTA pair: amber solid + hairline ghost on night ground */
.hero .btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
}

.hero .btn-primary:hover {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.hero .btn-ghost {
  background: transparent;
  color: var(--hero-ink);
  border-color: var(--hero-line-soft);
  box-shadow: none;
}

.hero .btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: none;
}

.hero .btn-ghost .btn-icon {
  background: var(--hero-chip-bg);
  color: var(--color-accent);
}

.hero .btn-ghost:hover .btn-icon {
  background: var(--hero-chip-bg);
}

/* ---- stats + footer: amber accents instead of the old teal ----------- */
.trust-bar {
  background: var(--color-ink);
  border-top: 1px solid var(--hero-line);
}

.trust-bar .stat-value {
  color: var(--hero-ink);
}

.trust-bar .stat-value span {
  color: var(--color-accent);
}

.footer-col a:hover {
  color: var(--color-accent);
}

/* ---- tables: ruled, aligned figures ---------------------------------- */
.data-table thead th,
.table-wrap th {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

.data-table td,
.table-wrap td {
  font-variant-numeric: tabular-nums;
}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width: 768px) {
  .hero-float {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 1rem;
  }
}