/* ============================================
   Lirith Technologies — Site Stylesheet
   Shared design tokens and component styles.
   ============================================ */

:root {
  /* Color system — update these values to retune the palette site-wide */
  --color-bg:          #04111f;
  --color-bg-elevated: #071929;
  --color-surface:     #0b2035;
  --color-border:      #163450;
  --color-border-hi:   #1f4a6e;

  --color-text:        #fafaf9;
  --color-text-mute:   #a8a29e;
  --color-text-dim:    #78716c;

  --color-accent:      #ea7c2a; /* tactical amber */
  --color-accent-hi:   #f59e42;
  --color-accent-dim:  #b45d1a;

  /* Type */
  --font-display: "Space Grotesk", "Neue Haas Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

::selection { background: var(--color-accent); color: #0a0a0b; }

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--color-text-mute);
  font-weight: 500;
}

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

.display-xl { font-size: clamp(2.5rem, 5.5vw, 5rem); letter-spacing: -0.03em; line-height: 1.02; }
.display-lg { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.028em; }
.display-md { font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; }

/* ---------- Layout helpers ---------- */
.container-site { max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .container-site { padding-inline: 2.5rem; } }
@media (min-width: 1280px){ .container-site { padding-inline: 3.5rem; } }

.rule { border-top: 1px solid var(--color-border); }
.rule-accent { border-top: 1px solid var(--color-accent); }

/* ---------- Backgrounds / textures ---------- */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

.bg-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}

.hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(234,124,42,0.12), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 90%, rgba(234,124,42,0.06), transparent 60%),
    linear-gradient(180deg, #04111f 0%, #04111f 60%, #071929 100%);
}

.section-gradient {
  background: linear-gradient(180deg, #04111f 0%, #071929 100%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  border: 1px solid var(--color-border-hi);
  color: var(--color-text);
  background: transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  cursor: pointer;
}
.btn:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a0a0b;
}
.btn-primary:hover { background: var(--color-accent-hi); border-color: var(--color-accent-hi); color: #0a0a0b; }

.btn-ghost { border-color: var(--color-border); color: var(--color-text-mute); }
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-border-hi); background: transparent; }

/* ---------- Cards / surfaces ---------- */
.card {
  border: 1px solid var(--color-border);
  padding: 2rem;
  background: transparent;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
  position: relative;
}
.card:hover { border-color: var(--color-border-hi); background: rgba(255,255,255,0.01); }

.card-accent-top { border-top: 1px solid var(--color-accent); }

/* ---------- Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(4,17,31,0.72);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.site-header.scrolled { border-bottom-color: var(--color-border); background: rgba(4,17,31,0.92); }

.nav-link {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--color-text-mute);
  padding: 0.5rem 0.25rem;
  position: relative;
  transition: color 160ms ease;
}
.nav-link:hover { color: var(--color-text); }
.nav-link.active { color: var(--color-text); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: -2px;
  height: 1px; background: var(--color-accent);
}

.logo-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--color-text);
}
.logo-mark .dot {
  width: 8px; height: 8px; background: var(--color-accent); display: inline-block;
  transform: translateY(-1px);
}
.logo-mark .tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-text-dim);
  border-left: 1px solid var(--color-border); padding-left: 0.6rem; margin-left: 0.25rem;
}

/* ---------- Specification tables ---------- */
.spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.spec-row:last-child { border-bottom: 1px solid var(--color-border); }
.spec-row .label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--color-text-mute);
}
.spec-row .value { color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Image placeholders ---------- */
.img-placeholder {
  position: relative;
  background:
    linear-gradient(135deg, #0b1e35 0%, #071525 100%);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.img-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.img-placeholder .ph-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  background: rgba(4,17,31,0.85);
  text-align: center;
  max-width: 80%;
}
.img-placeholder .ph-label .ph-title { color: var(--color-text-mute); display: block; margin-bottom: 0.25rem; }

/* Corner brackets on some placeholders — adds a tactical/HUD feel */
.ph-brackets::after {
  content: "";
  position: absolute; inset: 12px;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--color-accent) 18px, transparent 18px) top left / 18px 1px no-repeat,
    linear-gradient(to bottom, var(--color-accent) 18px, transparent 18px) top left / 1px 18px no-repeat,
    linear-gradient(to left, var(--color-accent) 18px, transparent 18px) top right / 18px 1px no-repeat,
    linear-gradient(to bottom, var(--color-accent) 18px, transparent 18px) top right / 1px 18px no-repeat,
    linear-gradient(to right, var(--color-accent) 18px, transparent 18px) bottom left / 18px 1px no-repeat,
    linear-gradient(to top, var(--color-accent) 18px, transparent 18px) bottom left / 1px 18px no-repeat,
    linear-gradient(to left, var(--color-accent) 18px, transparent 18px) bottom right / 18px 1px no-repeat,
    linear-gradient(to top, var(--color-accent) 18px, transparent 18px) bottom right / 1px 18px no-repeat;
}

/* ---------- Scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Forms ---------- */
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 0.5rem;
}
.field-input,
.field-textarea,
.field-select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-hi);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  transition: border-color 160ms ease, background-color 160ms ease;
  border-radius: 0;
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(234,124,42,0.04);
}
.field-textarea { min-height: 140px; resize: vertical; }
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a8a29e' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: #030e18;
  padding: 4rem 0 2rem;
  margin-top: 6rem;
}

/* ---------- Utility ---------- */
.link-accent {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.link-accent:hover { border-bottom-color: var(--color-accent); }

.numeral { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Print styles (spec pages) ---------- */
@media print {
  :root { --color-bg: #ffffff; --color-text: #060b14; --color-text-mute: #333; --color-border: #ccc; --color-border-hi: #999; --color-accent: #b45d1a; }
  body { background: #fff; color: #060b14; }
  .site-header, .site-footer, .btn, .no-print { display: none !important; }
  .hero-gradient, .section-gradient, .bg-grid, .bg-noise { background: #fff !important; }
  .img-placeholder { background: #f5f5f5 !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .card { border-color: #ccc !important; break-inside: avoid; }
  h1, h2, h3, h4 { color: #0a0a0b; }
  a { color: #0a0a0b; text-decoration: underline; }
  .spec-row { border-color: #ccc !important; }
  .spec-row .label, .spec-row .value { color: #0a0a0b !important; }
}