/* ================================================================
   ROBSEEK — Design Tokens
   Black base · Signal Red accent · warm beige secondary
   ================================================================ */

:root {
  /* ---- Surfaces ---- */
  --rs-black:        #000000;
  --rs-ink:          #0A0A0B;   /* near-black page */
  --rs-panel:        #111113;   /* raised surfaces */
  --rs-panel-2:      #17171A;   /* second-level */
  --rs-hairline:     rgba(255,255,255,0.08);
  --rs-hairline-2:   rgba(255,255,255,0.14);
  --rs-scrim:        rgba(0,0,0,0.72);

  /* ---- Signal red (the brand) ---- */
  --rs-red:          #E10600;   /* primary red */
  --rs-red-bright:   #FF2A1F;   /* hover / pulse */
  --rs-red-deep:     #9E0500;   /* pressed */
  --rs-red-glow:     rgba(225,6,0,0.35);
  --rs-red-wash:     rgba(225,6,0,0.08);

  /* ---- Secondary warm beige (badges, soft accents) ---- */
  --rs-beige:        #D9C3A3;
  --rs-beige-dim:    #8A7A62;
  --rs-beige-wash:   rgba(217,195,163,0.08);

  /* ---- Type ---- */
  --rs-white:        #F6F6F7;
  --rs-cream:        #E8E3DA;   /* warm off-white body on dark */
  --rs-gray-1:       #A8A8AE;
  --rs-gray-2:       #6E6E75;
  --rs-gray-3:       #3A3A40;

  /* ---- Families ---- */
  --rs-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
  --rs-mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (desktop) ---- */
  --rs-fs-display:  clamp(44px, 6vw, 72px);
  --rs-fs-h1:       clamp(40px, 4.4vw, 56px);
  --rs-fs-h2:       clamp(30px, 3.2vw, 44px);
  --rs-fs-h3:       clamp(22px, 2.2vw, 30px);
  --rs-fs-lede:     clamp(17px, 1.3vw, 20px);
  --rs-fs-body:     16px;
  --rs-fs-small:    14px;
  --rs-fs-micro:    12px;

  /* ---- Spacing ---- */
  --rs-gutter:      24px;
  --rs-section:     clamp(72px, 9vw, 144px);
  --rs-radius:      2px;       /* sharp, not friendly */
  --rs-radius-card: 4px;

  /* ---- Motion ---- */
  --rs-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --rs-dur-fast:    160ms;
  --rs-dur:         320ms;
  --rs-dur-slow:    640ms;

  /* ---- Container ---- */
  --rs-max:         1280px;
  --rs-max-wide:    1440px;
}

/* Light mode — warm, editorial, institutional. Keeps red as sole accent. */
:root[data-theme="light"] {
  --rs-black:        #FFFFFF;
  --rs-ink:          #F7F5F1;       /* warm off-white page */
  --rs-panel:        #FFFFFF;
  --rs-panel-2:      #EFEBE3;       /* raised tone */
  --rs-hairline:     rgba(10,10,11,0.10);
  --rs-hairline-2:   rgba(10,10,11,0.18);
  --rs-scrim:        rgba(255,255,255,0.72);

  --rs-red:          #D40600;       /* slightly deeper for contrast on light */
  --rs-red-bright:   #E10600;
  --rs-red-deep:     #9E0500;
  --rs-red-glow:     rgba(212,6,0,0.22);
  --rs-red-wash:     rgba(212,6,0,0.06);

  --rs-beige:        #8A7A62;
  --rs-beige-dim:    #B5A58A;
  --rs-beige-wash:   rgba(138,122,98,0.08);

  --rs-white:        #0A0A0B;       /* primary ink (was white in dark) */
  --rs-cream:        #26262A;       /* body ink */
  --rs-gray-1:       #5A5A62;
  --rs-gray-2:       #8A8A90;
  --rs-gray-3:       #C8C5BE;
}

/* Light-mode-specific overrides for a few places that rely on dark-only effects */
:root[data-theme="light"] .rs-ph-image {
  background:
    repeating-linear-gradient(135deg,
      rgba(212,6,0,0.07) 0 14px,
      transparent 14px 28px),
    linear-gradient(180deg, #faf8f3 0%, #efeae0 100%);
}
:root[data-theme="light"] .rs-ph-image__badge { background: #fff; }
:root[data-theme="light"] .rs-ph-image__prompt {
  background: rgba(255,255,255,0.82);
  color: #26262A;
}
:root[data-theme="light"] .rs-ph-portrait {
  background: radial-gradient(120% 90% at 50% 30%, #f2ede3 0%, #e4dccd 80%);
}
:root[data-theme="light"] .rs-ph-portrait__badge {
  background: rgba(255,255,255,0.82);
  color: #5A5A62;
  border-top-color: var(--rs-gray-3);
}
:root[data-theme="light"] .rs-ph-portrait__badge strong { color: #0A0A0B; }

:root[data-theme="light"] .rs-btn--primary { color: #fff; }
:root[data-theme="light"] .rs-btn--ghost { color: #0A0A0B; }

/* ================================================================
   Reset + base
   ================================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--rs-ink);
  color: var(--rs-cream);
  font-family: var(--rs-sans);
  font-size: var(--rs-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ================================================================
   Type utility classes
   ================================================================ */
.rs-eyebrow {
  font-family: var(--rs-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rs-red);
  font-weight: 500;
}
.rs-eyebrow--neutral { color: var(--rs-gray-1); }

.rs-display {
  font-family: var(--rs-display);
  font-size: var(--rs-fs-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--rs-white);
  text-wrap: balance;
}
.rs-h1 { font-family: var(--rs-display); font-size: var(--rs-fs-h1); line-height: 1.06; letter-spacing: -0.02em; font-weight: 600; color: var(--rs-white); text-wrap: balance; }
.rs-h2 { font-family: var(--rs-display); font-size: var(--rs-fs-h2); line-height: 1.1;  letter-spacing: -0.015em; font-weight: 600; color: var(--rs-white); text-wrap: balance; }
.rs-h3 { font-family: var(--rs-display); font-size: var(--rs-fs-h3); line-height: 1.2;  letter-spacing: -0.01em;  font-weight: 600; color: var(--rs-white); }
.rs-lede { font-size: var(--rs-fs-lede); line-height: 1.55; color: var(--rs-cream); text-wrap: pretty; max-width: 62ch; }
.rs-body { color: var(--rs-cream); }
.rs-caption { font-family: var(--rs-mono); font-size: var(--rs-fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-gray-2); }

.rs-red { color: var(--rs-red); }
.rs-cream { color: var(--rs-cream); }
.rs-muted { color: var(--rs-gray-1); }

/* ================================================================
   Signature primitives
   ================================================================ */

/* L-bracket frame (see Value Proposition slide) */
.rs-brackets {
  position: relative;
  padding: 48px 56px;
}
.rs-brackets::before,
.rs-brackets::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--rs-white);
  pointer-events: none;
}
.rs-brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rs-brackets::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.rs-brackets--red::before,
.rs-brackets--red::after { border-color: var(--rs-red); }

/* Vertical red divider (see title slide) */
.rs-vdiv {
  width: 8px;
  background: var(--rs-red);
  align-self: stretch;
}

/* Chevron logomark (flat ◢, our own take) */
.rs-chevron {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--rs-red);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  vertical-align: -2px;
}

/* Wordmark */
.rs-wordmark {
  font-family: var(--rs-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rs-red);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--rs-radius);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all var(--rs-dur) var(--rs-ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rs-btn--primary {
  background: var(--rs-red);
  color: #fff;
}
.rs-btn--primary:hover {
  background: var(--rs-red-bright);
  box-shadow: 0 0 0 4px var(--rs-red-wash);
}
.rs-btn--ghost {
  background: transparent;
  color: var(--rs-white);
  border-color: var(--rs-hairline-2);
}
.rs-btn--ghost:hover {
  border-color: var(--rs-white);
}
.rs-btn svg { width: 14px; height: 14px; }

/* Hairline rule */
.rs-rule { height: 1px; background: var(--rs-hairline); border: 0; }
.rs-rule--strong { background: var(--rs-hairline-2); }

/* Containers */
.rs-container { max-width: var(--rs-max); margin: 0 auto; padding: 0 32px; }
.rs-container--wide { max-width: var(--rs-max-wide); }

/* Section */
.rs-section { padding: var(--rs-section) 0; }

/* Corner tick marks (used on cards / diagrams) */
.rs-ticks {
  position: relative;
}
.rs-ticks::before,
.rs-ticks::after,
.rs-ticks > .rs-tick-a,
.rs-ticks > .rs-tick-b {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--rs-red);
}
.rs-ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rs-ticks::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rs-ticks > .rs-tick-a { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rs-ticks > .rs-tick-b { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ================================================================
   Placeholder system — three distinct styles
   ================================================================ */

/* 1) IMAGE PROMPT — diagonal red stripes + monospace prompt */
.rs-ph-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(225,6,0,0.06) 0 14px,
      transparent 14px 28px
    ),
    linear-gradient(180deg, #0c0c0d 0%, #050505 100%);
  border: 1px solid var(--rs-red);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.rs-ph-image__badge {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--rs-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rs-red);
  background: #000;
  padding: 6px 10px;
  border: 1px solid var(--rs-red);
}
.rs-ph-image__prompt {
  font-family: var(--rs-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--rs-cream);
  background: rgba(0,0,0,0.7);
  padding: 16px 20px;
  margin: 16px;
  border-left: 2px solid var(--rs-red);
  max-width: 70%;
  backdrop-filter: blur(4px);
}

/* 2) PLACEHOLDER DATA — red-bracketed stat well */
.rs-ph-stat {
  position: relative;
  padding: 28px 24px 22px;
  background: var(--rs-panel);
  border: 1px dashed var(--rs-red);
}
.rs-ph-stat__badge {
  position: absolute;
  top: -9px; left: 16px;
  background: var(--rs-ink);
  padding: 0 8px;
  font-family: var(--rs-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rs-red);
}
.rs-ph-stat__value {
  font-family: var(--rs-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rs-white);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rs-ph-stat__value::before { content: "["; color: var(--rs-red); font-weight: 400; }
.rs-ph-stat__value::after  { content: "]"; color: var(--rs-red); font-weight: 400; }
.rs-ph-stat__label {
  font-size: 13px;
  color: var(--rs-gray-1);
  margin-top: 8px;
  line-height: 1.45;
}
.rs-ph-stat__note {
  font-family: var(--rs-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rs-red);
  margin-top: 14px;
}

/* 3) PORTRAIT REQUIRED — silver-bordered silhouette well */
.rs-ph-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 90% at 50% 30%, #1a1a1c 0%, #0a0a0b 70%);
  border: 1px solid var(--rs-gray-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rs-ph-portrait__silhouette {
  width: 52%;
  color: var(--rs-gray-3);
  opacity: 0.55;
}
.rs-ph-portrait__badge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  padding: 10px 14px;
  font-family: var(--rs-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rs-gray-1);
  text-align: center;
  border-top: 1px solid var(--rs-gray-3);
}
.rs-ph-portrait__badge strong { color: var(--rs-white); font-weight: 500; }

/* ================================================================
   Reveal (for fade-up on scroll)
   ================================================================ */
.rs-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--rs-dur-slow) var(--rs-ease),
              transform var(--rs-dur-slow) var(--rs-ease);
}
.rs-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   TWEAKS — hero style + motion level hooks
   Controlled by <html data-hero-style=""> and <html data-motion="">
   ============================================================= */

/* Hero visual: "coded" hides the atmospheric ImagePrompt and shows
   a pure grid+brackets backdrop instead. */
html[data-hero-style="coded"] .hero .rs-ph-image {
  display: none;
}
html[data-hero-style="coded"] .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: min(560px, 46vw);
  height: min(340px, 28vw);
  margin: 0 8% 14% 0;
  background-image:
    linear-gradient(var(--rs-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--rs-hairline) 1px, transparent 1px);
  background-size: 40px 40px;
  border: 1px solid var(--rs-hairline-2);
  pointer-events: none;
  opacity: 0.9;
}
html[data-hero-style="coded"] .hero::before {
  /* brand L-brackets on coded hero */
  content: "";
  position: absolute;
  right: 8%; bottom: 14%;
  width: min(560px, 46vw);
  height: min(340px, 28vw);
  margin: 0;
  background:
    linear-gradient(var(--rs-red) 0 0) left top   / 18px 1px no-repeat,
    linear-gradient(var(--rs-red) 0 0) left top   / 1px 18px no-repeat,
    linear-gradient(var(--rs-red) 0 0) right top  / 18px 1px no-repeat,
    linear-gradient(var(--rs-red) 0 0) right top  / 1px 18px no-repeat,
    linear-gradient(var(--rs-red) 0 0) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--rs-red) 0 0) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--rs-red) 0 0) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--rs-red) 0 0) right bottom / 1px 18px no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Motion levels */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html[data-motion="off"] .rs-reveal {
  opacity: 1 !important;
  transform: none !important;
}
html[data-motion="subtle"] * {
  animation-duration: 1.6s !important;
}
html[data-motion="subtle"] .rs-reveal {
  transition-duration: 200ms !important;
}