/* Base Theme & Tokens */
:root{
  --bg: #a6ff00;           /* lime background */
  --olive: #6b8e23;        /* olive accents */
  --olive-2: #556b2f;      /* secondary olive */
  --text: #eafff5;          /* high-contrast text on glass */
  --muted: #d3e9c9;         /* muted copy */
  --surface: rgba(16, 22, 12, 0.28);   /* frosted glass surface */
  --surface-2: rgba(16, 22, 12, 0.18);
  --border: rgba(86, 104, 46, 0.55);
  --shadow: 0 8px 28px rgba(0,0,0,.28);
  --focus: 2px solid #d6ff55;
  --focus-offset: 2px;
}

html, body { height: 100%; }

/* Layered background: gradient overlay + subtle scanlines over lime base */
html, body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  background-color: var(--bg);
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.28), rgba(0,0,0,.15)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 4px);
  background-blend-mode: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}

/* Light-mode tweak for legibility (prefers-color-scheme: light) */
@media (prefers-color-scheme: light) {
  :root { --bg: #e9fbd6; --text: #0b0f0a; --muted: #2a2a2a; --surface: rgba(255,255,255,.8); }
  html, body { background-image: none; background-color: #e9fbd6; }
  header, main, footer { background: rgba(255,255,255,.65); color: #0b0f0a; }
}

/* Layout primitives */
.container { max-width: clamp(320px, 90vw, 1100px); margin-inline: auto; padding-inline: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

header, nav, main, article, aside, footer { padding: 0 0.5rem; }

/* Section headers (minimal, per requirement) */
header { text-align: center; padding: 1.25rem 0 0.75rem; }
header h1 { font-size: clamp(1.8rem, 4vw + 0.5rem, 2.6rem); margin: .25rem 0 .25rem; color: var(--text); font-weight: 700; letter-spacing: .3px; }
header .meta { font-size: clamp(0.9rem, 1.5vw, 1.05rem); color: var(--muted); margin: 0; }

/* HERO & content blocks */
main { display: block; padding: 0.5rem 0 1.5rem; }
article { width: min(1000px, 92%); margin: 0 auto; }

/* Image frame styling (with glow/border) */
.image-frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); box-shadow: var(--shadow); background: rgba(0,0,0,.25); width: 100%; aspect-ratio: 16/9; display: block; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* In-page content styling (glass panels where applicable) */
.content { padding: 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Product ad / promo blocks in footer */
.product-ad { display: block; padding: .9rem; text-align: center; border-radius: 12px; background: rgba(10,12,8,.28); border: 1px solid rgba(86,104,46,.5); margin: .5rem 0; }
.product-ad a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; color: #fff; text-decoration: none; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); }
.product-ad a:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Typography tweaks for headings and body text */
h2 { font-size: clamp(1.4rem, 2.5vw + 0.8rem, 2rem); margin: .75rem 0 0.5rem; color: var(--text); }
p { color: var(--muted); margin: 0 0 1rem; }

/* Lists */
ul { padding-left: 1.25rem; margin: .5rem 0 1rem; }
li { margin: .25rem 0; }

/* Links & buttons (interactive elements) */
a { color: #baff55; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); outline-color: #d6ff66; }

/* Buttons & CTAs */
.btn, .cta { display: inline-block; padding: .75rem 1.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .2s ease; }
.btn:hover, .cta:hover { transform: translateY(-1px); }
.btn.primary { background: rgba(27, 94, 32, .9); border-color: rgba(27, 94, 32, .9); color: #eafff0; }
.btn:focus-visible, .cta:focus-visible, .btn.primary:focus-visible { outline: 2px solid #d6ff55; outline-offset: 2px; }

/* Card utility (compact, glassy) */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; color: var(--text); box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); animation: fadeIn .32s ease forwards; }
.tag { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; background: rgba(91, 125, 60, 0.25); color: #e8ffd0; border: 1px solid rgba(91,125,60,.5); }

/* Simple micro-animation (GPU-friendly) */
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *.card, .btn, .cta { animation: none !important; transition: none !important; }
}

/* Glass panel fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(8px)) {
  .surface, .content, .card { background: rgba(16,22,12,0.58); }
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root { --surface: rgba(16,22,12,0.58); }
}

/* Print styles (basic readability) */
@media print {
  body { background: #fff; color: #000; }
  a { text-decoration: underline; color: #000; }
}