/* ============================================================
   Satveer Edge Solutions — Design System
   shadcn token model · dark (default) + light themes
   ============================================================ */

/* ------------------------------------------------------------
   Palette: Instrument Yellow
   Neutral ink / paper / graphite canvas + a single signal-yellow
   accent. Yellow is used for fills, blocks, markers & underlines —
   never as fine text on light surfaces. `--accent-fg` is the
   *readable* accent used for accent TEXT (dark mustard on light,
   bright yellow on ink).
   ------------------------------------------------------------ */
:root {
  /* Light theme — paper + ink */
  --background: 48 16% 99%;        /* warm paper white */
  --foreground: 0 0% 9%;           /* ink black */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 47 98% 52%;           /* signal yellow (fills/blocks) */
  --primary-foreground: 0 0% 8%;   /* ink text on yellow */
  --secondary: 40 8% 94%;
  --secondary-foreground: 0 0% 9%;
  --muted: 40 8% 95%;
  --muted-foreground: 0 0% 38%;    /* graphite */
  --accent: 40 8% 92%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 40 6% 87%;
  --input: 40 6% 85%;
  --ring: 47 98% 48%;
  --signal: 41 92% 38%;            /* readable amber for dots/labels */
  --accent-fg: 40 96% 30%;         /* dark mustard — readable on paper */
  --radius: 0.5rem;

  --grid-line: 0 0% 9% / 0.05;
  --hero-glow: 47 98% 52% / 0.12;
}

.dark {
  /* Dark theme (default) — ink + signal yellow */
  --background: 60 3% 6%;          /* near-black, faint warm */
  --foreground: 48 12% 96%;
  --card: 48 4% 9%;
  --card-foreground: 48 12% 96%;
  --popover: 48 4% 8%;
  --popover-foreground: 48 12% 96%;
  --primary: 47 98% 54%;           /* bright signal yellow */
  --primary-foreground: 0 0% 8%;   /* ink text on yellow */
  --secondary: 48 4% 15%;
  --secondary-foreground: 48 12% 96%;
  --muted: 48 4% 13%;
  --muted-foreground: 45 6% 64%;
  --accent: 48 4% 16%;
  --accent-foreground: 48 12% 96%;
  --destructive: 0 62% 47%;
  --destructive-foreground: 0 0% 100%;
  --border: 48 5% 19%;
  --input: 48 5% 22%;
  --ring: 47 98% 54%;
  --signal: 47 98% 56%;            /* bright yellow reads on ink */
  --accent-fg: 47 98% 58%;         /* bright yellow — readable on ink */

  --grid-line: 48 12% 96% / 0.05;
  --hero-glow: 47 98% 54% / 0.16;
}

* { border-color: hsl(var(--border)); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: hsl(var(--primary) / 0.28); }

/* ---------- Typography helpers ---------- */
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; }

.mono-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--accent-fg));
}
/* yellow leading tick on eyebrows */
.eyebrow::before {
  content: "";
  width: 1.4rem; height: 0.55rem;
  background: hsl(var(--primary));
  border-radius: 1px;
  flex: none;
}
.eyebrow.justify-center::before { display: none; }

/* Accent text utility override — keep yellow accents readable in
   both themes (dark mustard on paper, bright yellow on ink). */
.text-primary { color: hsl(var(--accent-fg)) !important; }

.text-gradient {
  background: linear-gradient(180deg, hsl(var(--foreground)) 0%, hsl(var(--foreground) / 0.62) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ---------- Backgrounds & textures ---------- */
.grid-bg {
  background-image:
    linear-gradient(to right, hsl(var(--grid-line)) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--grid-line)) 1px, transparent 1px);
  background-size: 56px 56px;
}

.grid-bg-fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 78%);
}

.hero-glow::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 620px;
  background: radial-gradient(60% 60% at 50% 0%, hsl(var(--hero-glow)) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.dot-bg {
  background-image: radial-gradient(hsl(var(--grid-line)) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Cards ---------- */
.card-surface {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.card-hover:hover {
  border-color: hsl(var(--primary) / 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px hsl(var(--primary) / 0.5);
}

.ring-frame {
  position: relative;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.ring-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.45), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.ring-frame:hover::after { opacity: 1; }

/* corner ticks (technical framing) */
.corner-ticks { position: relative; }
.corner-ticks::before,
.corner-ticks::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-color: hsl(var(--primary) / 0.6);
  border-style: solid;
}
.corner-ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.corner-ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .875rem; font-weight: 500; line-height: 1;
  border-radius: calc(var(--radius) - 0.15rem);
  padding: 0 1.1rem; height: 2.6rem;
  transition: all .2s ease; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); box-shadow: 0 10px 30px -10px hsl(var(--primary) / 0.7); transform: translateY(-1px); }
.btn-outline { border-color: hsl(var(--border)); color: hsl(var(--foreground)); background: hsl(var(--background) / 0.4); }
.btn-outline:hover { background: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.5); }
.btn-ghost { color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
}
.badge-primary { color: hsl(var(--accent-fg)); border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.14); }
.badge-signal { color: hsl(var(--accent-fg)); border-color: hsl(var(--signal) / 0.4); background: hsl(var(--signal) / 0.1); }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "JetBrains Mono", monospace; font-size: .72rem;
  padding: .45rem .7rem; border-radius: calc(var(--radius) - 0.2rem);
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  transition: all .2s ease;
}
.chip:hover { border-color: hsl(var(--primary) / 0.5); color: hsl(var(--foreground)); }

/* ---------- Status dot ---------- */
.live-dot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--signal)); }
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 1px solid hsl(var(--signal) / 0.6);
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 80%,100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- Marquee ---------- */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 3rem; padding-right: 3rem; animation: scroll-x 36s linear infinite; white-space: nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- SVG animation utilities ---------- */
.dash-flow { stroke-dasharray: 6 8; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.dash-flow-rev { stroke-dasharray: 6 8; animation: dash-rev 1.6s linear infinite; }
@keyframes dash-rev { to { stroke-dashoffset: 28; } }
.pulse-soft { animation: pulse-soft 2.4s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.sweep { animation: sweep 3.2s linear infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.blink { animation: blink 1.1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Header ---------- */
.site-header { transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled {
  background: hsl(var(--background) / 0.72);
  backdrop-filter: blur(14px);
  border-bottom-color: hsl(var(--border));
}
.nav-link { position: relative; color: hsl(var(--muted-foreground)); transition: color .2s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { color: hsl(var(--foreground)); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.35rem; height: 2px;
  background: hsl(var(--primary)); border-radius: 2px;
}

/* ---------- Misc ---------- */
.divider-x { height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent); }
.hairline { border-top: 1px solid hsl(var(--border)); }
.input-field {
  width: 100%; background: hsl(var(--card)); border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 0.2rem); padding: .65rem .8rem;
  color: hsl(var(--foreground)); font-size: .9rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.input-field::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.input-field:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); }

.count-tabular { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 3px solid hsl(var(--background)); }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* ============================================================
   Instrument Yellow — artistic motifs
   ============================================================ */

/* Ink panels: any card/frame that carries an SVG diagram becomes a
   signature near-black instrument panel in BOTH themes. Tokens are
   overridden locally so the diagram renders dark-on-dark with bright
   yellow accents regardless of the page theme. */
.card-surface:has(svg),
.ring-frame:has(svg) {
  --foreground: 48 12% 96%;
  --card-foreground: 48 12% 96%;
  --muted-foreground: 45 7% 66%;
  --card: 48 5% 13%;
  --muted: 48 5% 16%;
  --border: 48 6% 24%;
  --accent-fg: 47 98% 60%;
  --signal: 47 98% 58%;
  --primary: 47 98% 56%;
  background-color: #0c0c0d;
  border-color: hsl(48 6% 22%);
  color: hsl(48 12% 96%);
}
.card-surface:has(svg) .mono-label,
.ring-frame:has(svg) .mono-label { color: hsl(45 7% 66%); }

/* Caution stripe — thin diagonal hazard rule, used sparingly */
.caution-stripe {
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    hsl(var(--primary)) 0 14px,
    hsl(var(--foreground)) 14px 28px
  );
  border-radius: 2px;
}
.dark .caution-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    hsl(var(--primary)) 0 14px,
    #0c0c0d 14px 28px
  );
}

/* Marker highlight — hand-drawn yellow swipe behind a keyword */
.mark {
  background: linear-gradient(104deg, transparent 0.5%, hsl(var(--primary) / 0.85) 1%, hsl(var(--primary) / 0.85) 99%, transparent 99.5%);
  color: hsl(var(--foreground));
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 1px;
}
.dark .mark { color: #0c0c0d; }

/* Solid yellow block accent (e.g. heading left rule) */
.block-accent { position: relative; padding-left: 1.1rem; }
.block-accent::before {
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em;
  width: 5px; background: hsl(var(--primary)); border-radius: 1px;
}

/* Ghost index numeral — oversized editorial section marker */
.ghost-index {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  line-height: 0.8;
  color: hsl(var(--foreground) / 0.06);
  letter-spacing: -0.03em;
}
.dark .ghost-index { color: hsl(var(--foreground) / 0.07); }

/* Yellow underline link */
.u-link {
  color: hsl(var(--foreground));
  text-decoration: none;
  background-image: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
  background-size: 100% 2px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease, color .2s ease;
  padding-bottom: 1px;
}
.u-link:hover { background-size: 100% 100%; }
.dark .u-link:hover { color: #0c0c0d; }

/* Primary button: square-ish, industrial */
.btn-primary { font-weight: 600; letter-spacing: 0.01em; }

/* Live dot reads as ink-on-yellow when needed */
.badge-primary .live-dot, .badge-signal .live-dot { background: hsl(var(--accent-fg)); }
.badge-primary .live-dot::after, .badge-signal .live-dot::after { border-color: hsl(var(--accent-fg) / 0.6); }