/* ============================================================
   _tokens.css — Renix Labs design system
   V6 Capability · locked 2026-04-28
   Single source of truth: every HTML in sections-lab/ links here.
   Edit tokens here — every section file inherits the change.
   V5/V7 forks killed for production (see archive/2026-04-28-pre-v15).
   ============================================================ */

:root {
  /* === PALETTE — V6 Capability ================================== */
  --rl-base:           #ecedf0;       /* cool paper background */
  --rl-base-rgb:       236, 237, 240;
  --rl-base-alt:       #e3e5e9;       /* subtle tonal layer */
  --rl-surface:        #ffffff;       /* cards / elevated surfaces */
  --rl-frame:          #051f20;       /* deep teal — header/footer/buttons ONLY */
  --rl-frame-rgb:      5, 31, 32;
  --rl-frame-2:        #0a3537;       /* frame highlight stop */
  --rl-accent:         #9a5530;       /* deep rust — links, eyebrows, accents */
  --rl-accent-rgb:     154, 85, 48;
  --rl-accent-hover:   #80451f;
  --rl-contra:         #8a5828;       /* amber-brown — sparse warm punctuation */
  --rl-contra-rgb:     138, 88, 40;
  --rl-text:           #0f1418;       /* cool onyx body */
  --rl-text-2:         #5C5754;       /* secondary text */
  --rl-text-mute:      #9A938E;       /* muted text */
  --rl-text-on-frame:  #ecedf0;       /* text on coffee */
  --rl-text-on-frame-2: rgba(236, 237, 240, 0.65);
  --rl-border:         #d6d8dc;
  --rl-border-strong:  #b9bcc1;

  /* === SPACING SCALE ============================================ */
  --rl-space-1:   4px;
  --rl-space-2:   8px;
  --rl-space-3:   12px;
  --rl-space-4:   16px;
  --rl-space-5:   24px;
  --rl-space-6:   32px;
  --rl-space-7:   40px;
  --rl-space-8:   56px;
  --rl-space-9:   72px;
  --rl-space-10:  96px;
  --rl-space-11:  128px;

  /* Section block padding — v16 lock 2026-04-29: 48px floor (user Shopify habit), 80px ceiling (marketing breathing) */
  --rl-section-pad-block:  clamp(48px, 6vw, 80px);
  --rl-section-pad-inline: clamp(20px, 4vw, 48px);
  --rl-section-max:        1280px;

  /* === TYPE SCALE =============================================== */
  --rl-font-serif: 'Newsreader', Georgia, serif;
  --rl-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rl-font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --rl-h1:        clamp(40px, 6vw, 72px);
  --rl-h2:        clamp(32px, 4.5vw, 52px);
  --rl-h3:        clamp(22px, 2.6vw, 32px);
  --rl-h4:        clamp(18px, 2vw, 22px);
  --rl-body-lg:   18px;
  --rl-body:      16px;
  --rl-body-sm:   14px;
  --rl-label:     12px;       /* uppercase + tracking */
  --rl-label-sm:  11px;
  --rl-mono-sm:   12px;

  /* === MOTION =================================================== */
  --rl-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --rl-ease-spring: cubic-bezier(0.16, 1, 0.3, 0.68);  /* ease-out-quint — bounce killed per CRITIQUE-v14 */
  --rl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rl-dur-fast:    200ms;
  --rl-dur:         400ms;
  --rl-dur-slow:    700ms;
  --rl-stagger:     80ms;

  /* === RADIUS =================================================== */
  --rl-radius-sm: 6px;
  --rl-radius:    12px;
  --rl-radius-lg: 20px;
  --rl-radius-xl: 28px;
  --rl-radius-pill: 999px;

  /* === SHADOWS (frame-tinted, never pure black) ================ */
  --rl-shadow-sm: 0 1px 2px rgba(var(--rl-frame-rgb), 0.04),
                  0 4px 12px rgba(var(--rl-frame-rgb), 0.06);
  --rl-shadow-md: 0 4px 14px -2px rgba(var(--rl-frame-rgb), 0.10),
                  0 12px 30px -8px rgba(var(--rl-frame-rgb), 0.10);
  --rl-shadow-lg: 0 12px 40px -8px rgba(var(--rl-frame-rgb), 0.18);
  --rl-shadow-accent: 0 6px 14px -4px rgba(var(--rl-accent-rgb), 0.18),
                      0 12px 30px -8px rgba(var(--rl-frame-rgb), 0.10);

  /* --rl-frame-gradient is intentionally NOT defined here.
     V5/V6 use solid --rl-frame. V7 sets a real gradient.
     Sites use: var(--rl-frame-gradient, var(--rl-frame))  */
}

/* ============================================================
   GLOBAL RESETS — minimal, opinionated
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--rl-font-sans);
  background: var(--rl-base);
  color: var(--rl-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rl-font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--rl-text);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============================================================
   BUTTON RULE — primary CTAs use FRAME (coffee), per spec
   Apply: <a class="rl-btn rl-btn--primary"> or rl-btn--secondary
   ============================================================ */
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rl-space-2);
  font-family: var(--rl-font-sans);
  font-size: var(--rl-body);
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 14px 28px;
  border-radius: var(--rl-radius);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background var(--rl-dur-fast) var(--rl-ease),
              border-color var(--rl-dur-fast) var(--rl-ease),
              color var(--rl-dur-fast) var(--rl-ease),
              transform var(--rl-dur-fast) var(--rl-ease),
              box-shadow var(--rl-dur) var(--rl-ease);
  cursor: pointer;
}
.rl-btn--primary {
  background: var(--rl-frame);
  color: var(--rl-text-on-frame);
  border-color: var(--rl-frame);
  box-shadow: 0 6px 16px -4px rgba(var(--rl-frame-rgb), 0.20);
}
.rl-btn--primary:hover {
  background: var(--rl-frame-2);
  border-color: var(--rl-frame-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(var(--rl-frame-rgb), 0.32);
}
.rl-btn--secondary {
  background: transparent;
  color: var(--rl-text);
  border-color: var(--rl-border-strong);
}
.rl-btn--secondary:hover {
  background: var(--rl-surface);
  border-color: var(--rl-frame);
  transform: translateY(-1px);
}

/* ============================================================
   REDUCED MOTION — respect always
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
}