/* ══════════════════════════════════════════════════════════════
   Trak — Editorial-Dark Tokens & Primitives
   Shared token + primitive stylesheet for the marketing site.
   Load BEFORE page-specific CSS. Consumers keep existing class
   names (.section-label, .label-line, .glass-card, .btn-primary,
   .btn-glass, .btn-pill, .email-input) and can adopt the new
   editorial primitives below.
   ══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Backgrounds — editorial forest gradient stops */
  --bg-top: #14281C;
  --bg-mid: #0F2015;
  --bg-bottom: #0B1710;
  --glow: rgba(168, 213, 181, 0.10);

  /* Surfaces */
  --surface: #0D1520;
  --surface-2: #111C24;

  /* Lines & borders */
  --line: #2A3A32;
  --border-card: #35473D;
  --hairline: 1px;

  /* Text */
  --text: #F0F4F2;
  --text-muted: #8A9FA8;
  --text-dim: #66756E;

  /* Greens */
  --green: #2F5E3E;
  --green-pale: #A8D5B5;
  --green-bright: #8FE5A9;

  /* Accents */
  --gold: #F5C417;
  --amber: #FF9F4D;
  --cyan: #55C3D8;

  /* Radii */
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Type */
  --font-sans: 'Inter', -apple-system, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-bottom);
  background-image:
    radial-gradient(ellipse 900px 700px at 12% 8%, var(--glow) 0%, transparent 55%),
    radial-gradient(ellipse 700px 700px at 85% 30%, rgba(47, 94, 62, 0.10) 0%, transparent 60%),
    linear-gradient(158deg, var(--bg-top) 0%, var(--bg-mid) 48%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: bg-drift 40s ease-in-out infinite alternate;
}

/* Calm background gradient drift (~40s) */
@keyframes bg-drift {
  0% {
    background-position: 0% 0%, 100% 30%, 0% 0%;
  }
  100% {
    background-position: 20% 12%, 80% 40%, 0% 0%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Hairline ── */
.hairline {
  height: var(--hairline);
  width: 100%;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ══════════════════════════════════════════════════════════════
   SECTION LABEL — UPPERCASE tracked label with right-aligned
   numbered marker (01 / 02) + hairline underline.

   Editorial usage:
     <div class="section-label">
       <span>CORE PILLARS</span>
       <span class="label-num">01</span>
     </div>
     <div class="label-line"></div>

   Legacy usage (index.html) still works: two .label-line rails
   flanking a centered <span>.
   ══════════════════════════════════════════════════════════════ */
.section-label {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  margin-bottom: 20px;
}
.section-label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Right-aligned numbered marker (01 / 02) */
.section-label .label-num {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  color: var(--text-dim);
}

/* Hairline under a section label (also used as flanking rails) */
.label-line {
  height: var(--hairline);
  width: 100%;
  max-width: 200px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Editorial variant: full-width hairline under a left-aligned label.
   Wrap with .section-head to get label row + underline stacked. */
.section-head {
  margin-bottom: 40px;
}
.section-head .section-label {
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.section-head .label-line {
  max-width: none;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ══════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════ */

/* Frosted glass card (legacy compatible) */
.glass-card {
  background: rgba(17, 28, 36, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--hairline) solid var(--border-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
}

/* Editorial card — flat dark surface, hairline border */
.editorial-card {
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.editorial-card:hover {
  border-color: var(--border-card);
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-glass {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.btn-primary {
  background: rgba(47, 94, 62, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--hairline) solid rgba(168, 213, 181, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #fff;
  padding: 12px 24px;
}
.btn-primary:hover { background: rgba(47, 94, 62, 0.85); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary.btn-success { background: var(--green-pale); color: var(--bg-bottom); }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-glass {
  background: rgba(17, 28, 36, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--hairline) solid var(--border-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 10px 22px;
  font-size: 13px;
}
.btn-glass:hover {
  background: rgba(47, 94, 62, 0.35);
  border-color: rgba(168, 213, 181, 0.30);
}

/* Pill modifier — fully rounded, roomy padding */
.btn-pill {
  border-radius: var(--radius-pill);
  padding: 14px 28px;
}

/* ══════════════════════════════════════════════════════════════
   FIELDS / INPUTS
   ══════════════════════════════════════════════════════════════ */
.field,
.email-input {
  background: rgba(13, 21, 32, 0.60);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 16px 24px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field:focus,
.email-input:focus { border-color: rgba(168, 213, 181, 0.30); }
.field::placeholder,
.email-input::placeholder { color: rgba(138, 159, 168, 0.50); }

/* Square-cornered field variant for editorial forms */
.field--square { border-radius: 12px; }

/* ══════════════════════════════════════════════════════════════
   CHIP — small pill tag / status marker
   ══════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(47, 94, 62, 0.15);
  border: var(--hairline) solid rgba(47, 94, 62, 0.30);
  color: var(--green-pale);
  white-space: nowrap;
}
.chip--gold {
  background: rgba(245, 196, 23, 0.12);
  border-color: rgba(245, 196, 23, 0.28);
  color: var(--gold);
}
.chip--muted {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: var(--text-muted);
}