/* Rise2 — theme tokens. Cool near-black + signal amber, tuned for an AI + robotics lab:
   flat near-black surfaces, faint engineering grid, amber signal, telemetry mono.
   Same shadcn-style token names as figlime-web/src/assets/theme.css — swap the values here
   and all six pages reskin at once. */
:root {
  /* ---- Surfaces ---- */
  --background:           hsl(220 14% 5%);     /* near-black canvas */
  --surface-1:            hsl(220 12% 8%);     /* raised panel */
  --surface-2:            hsl(220 11% 11%);    /* elevated / inverted band */
  --card:                 hsl(220 12% 8%);
  --muted:                hsl(220 11% 10%);

  /* ---- Text ---- */
  --foreground:           hsl(60 12% 96%);
  --muted-foreground:     hsl(220 8% 66%);
  --muted-foreground-2:   hsl(220 7% 48%);
  --dark-muted:           hsl(220 8% 62%);

  /* ---- Brand: signal lime ---- */
  --primary:              hsl(36 96% 54%);     /* signal amber — CTA, accents */
  --primary-bright:       hsl(38 98% 62%);
  --primary-foreground:   hsl(220 20% 6%);     /* ink on lime */
  --primary-text:         hsl(38 92% 66%);     /* accent text on dark */
  --brand:                hsl(36 96% 54%);
  --brand-soft:           hsl(34 45% 32%);
  --accent-soft:          hsl(36 96% 54% / 0.15);
  --glow:                 0 0 0 1px hsl(36 96% 54% / 0.35), 0 0 34px -6px hsl(36 96% 54% / 0.45);

  /* ---- Status ---- */
  --destructive:          hsl(14 100% 70%);    /* form errors, failed sends */
  --destructive-foreground: hsl(220 20% 6%);

  /* ---- Lines ---- */
  --border:               hsl(220 10% 17%);
  --border-strong:        hsl(220 10% 26%);
  --ring:                 hsl(36 96% 54%);
  --grid-line:            hsl(220 10% 100% / 0.035);

  --surface-glass:        hsl(220 14% 5% / 0.72);  /* sticky nav backdrop */
  --scrim:                hsl(0 0% 0% / 0.4);      /* overlay behind fixed bars */

  /* legacy alias — dark bands are now elevated panels, not inverted ones */
  --surface-dark:         hsl(220 11% 11%);

  /* ---- Radius (Figlime scale) ---- */
  --radius:               0.625rem;
  --radius-sm:            calc(var(--radius) - 2px);
  --radius-lg:            calc(var(--radius) + 6px);
  --radius-xl:            calc(var(--radius) + 14px);
  --radius-pill:          9999px;

  /* ---- Type ---- */
  --font-head: 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 84px;

  --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.5);
  --shadow-lift: 0 18px 48px -20px hsl(0 0% 0% / 0.9);

  color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--background); }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* faint engineering grid — the lab substrate */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
}

h1, h2, h3, h4 { letter-spacing: -0.03em; line-height: 1.08; color: var(--foreground); }

a { color: var(--foreground); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-text); }
::selection { background: var(--primary); color: var(--primary-foreground); }

input, textarea, select { font: inherit; color: var(--foreground); }
input::placeholder, textarea::placeholder { color: var(--muted-foreground-2); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].on { opacity: 1; transform: translateY(0); }

/* ---- Responsive: tablet & phone ---- */
/* Mobile nav: the toggle and panel exist only below the breakpoint, where
   [data-nav-links] is hidden. Without this the small-screen nav has no links
   at all — reachable only via the footer. */
[data-nav-toggle] { display: none; }
[data-nav-toggle] [data-icon="close"] { display: none; }
[data-nav-toggle][aria-expanded="true"] [data-icon="open"] { display: none; }
[data-nav-toggle][aria-expanded="true"] [data-icon="close"] { display: block; }
[data-nav-panel] { display: none; }

@media (max-width: 860px) {
  [data-nav-toggle] { display: inline-flex !important; }
  [data-nav-panel].open { display: block !important; }
  [data-grid="2"], [data-grid="3"], [data-grid="4"] { grid-template-columns: 1fr !important; }
  [data-grid="side"] { grid-template-columns: 1fr !important; text-align: center !important; }
  [data-grid="side"] img { margin: 0 auto !important; }
  [data-grid="side3"] { grid-template-columns: 1fr !important; row-gap: 12px !important; }
  [data-grid="footer"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-nav-links] { display: none !important; }
  [data-hero-media] { height: 300px !important; }
  [data-hero-media-sm] { height: 220px !important; }
  [data-tight-pad] { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 520px) {
  [data-hero-media] { height: 220px !important; }
}