/* =========================================================
   base.css — design tokens, reset, typography, layout shell
   theme: black & yellow (bamboo-inspired)
   ========================================================= */

:root {
  /* ---------- core surfaces ---------- */
  --bg:           #08080A;
  --bg-2:         #0D0D11;
  --surface:      #131316;
  --surface-2:    #181820;
  --surface-hi:   #22222B;
  --surface-line: #2C2C36;

  /* ---------- ink ---------- */
  --ink:          #F5F5F0;
  --ink-2:        #9A9A95;
  --ink-3:        #5E5E5A;
  --ink-4:        #2A2A28;

  /* ---------- yellow (single brand accent) ---------- */
  --yellow:        #F5C518;
  --yellow-bright: #FFD93D;
  --yellow-deep:   #B89812;
  --yellow-glow:   rgba(245, 197, 24, 0.55);
  --yellow-glow-2: rgba(245, 197, 24, 0.25);
  --yellow-soft:   rgba(245, 197, 24, 0.10);
  --yellow-line:   rgba(245, 197, 24, 0.22);

  /* ---------- supporting ---------- */
  --amber:        #FF9F1C;        /* mild warm secondary */
  --amber-glow:   rgba(255, 159, 28, 0.45);
  --amber-soft:   rgba(255, 159, 28, 0.10);

  --green:        #4ADE80;        /* status: stable / online */
  --green-glow:   rgba(74, 222, 128, 0.55);

  --red:          #FF4D4D;        /* warning only */

  /* ---------- lines ---------- */
  --line:         rgba(255, 255, 255, 0.06);
  --line-strong:  rgba(255, 255, 255, 0.12);

  /* ---------- radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ---------- type ---------- */
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-head:    'Bricolage Grotesque', 'Inter', sans-serif;
  --f-body:    'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* ---------- cursor tracker ---------- */
  --mx: 50%;
  --my: 50%;

  /* ---------- container ---------- */
  --maxw: 1280px;
  --gut:  32px;
}

/* =========================================================
   reset
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

::selection {
  background: var(--yellow);
  color: var(--bg);
}

::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--bg); }
::-webkit-scrollbar-thumb   { background: var(--surface-hi); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--yellow-deep); }

/* =========================================================
   typography
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--yellow);
  box-shadow: 0 0 10px var(--yellow-glow);
}

.h-display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(48px, 6.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.h-display em {
  font-style: italic;
  font-variation-settings: "SOFT" 60;
  color: var(--yellow);
  text-shadow:
    0 0 32px rgba(245, 197, 24, 0.55),
    0 0 64px rgba(245, 197, 24, 0.25);
}

.h-section {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.h-section em {
  font-style: italic;
  color: var(--yellow);
  font-variation-settings: "SOFT" 50;
  text-shadow: 0 0 24px rgba(245, 197, 24, 0.45);
}

.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
}
.lead strong { color: var(--ink); font-weight: 500; }

.mono   { font-family: var(--f-mono); }
.mono-y { font-family: var(--f-mono); color: var(--yellow); }

.code-pill {
  font-family: var(--f-mono);
  color: var(--yellow);
  background: var(--yellow-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* =========================================================
   layout shell
   ========================================================= */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

main, header, footer {
  position: relative;
  z-index: 3;
}

section.shell {
  padding: 100px 0;
  position: relative;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head .left  { max-width: 680px; }
.section-head .right { max-width: 380px; }
.section-head .lead  { font-size: 15.5px; }
.section-head .eyebrow { margin-bottom: 18px; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 1024px) {
  section.shell { padding: 80px 0; }
}
@media (max-width: 720px) {
  :root { --gut: 20px; }
  body  { font-size: 14.5px; }
  section.shell { padding: 64px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

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