/* ============================================================
   Lama Consultants — Design Tokens v2
   colors_and_type.css

   Key changes from v1:
   · All colors migrated to OKLCH with green-tinted neutrals (H=145°)
   · Poppins replaces Inter for body (Inter had only Black weight loaded)
   · Double-bezel card primitives (.card-shell / .card)
   · Button-in-button CTA (.btn-icon)
   · Emil Kowalski easing curves (cubic-bezier, not built-in keywords)
   · prefers-reduced-motion baked into reveal primitive
   ============================================================ */

/* ---------- LOCAL BRAND FONTS ---------- */

@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Poppins-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Poppins-Black.woff2') format('woff2'),
       url('fonts/Poppins-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/DMSans-Black.ttf') format('truetype');
}

:root {
  /* ========== COLOR ==========
     Exact design-system hex values. Do not approximate or shift hue. */

  /* Surfaces */
  --bg:        #080808;   /* page background       */
  --surface:   #111111;   /* card inner core       */
  --surface-2: #161616;   /* card outer shell      */
  --hairline:  #1A1A1A;   /* 1-px borders at rest  */
  --divider:   #222222;   /* horizontal rules      */

  /* Text */
  --fg:   #FFFFFF;         /* primary               */
  --fg-2: #888888;         /* secondary, captions   */
  --fg-3: #555555;         /* tertiary, disabled    */

  /* Accent — BCG green, single accent */
  --accent:    #88CC00;    /* 500 · primary         */
  --accent-hi: #9ADB00;    /* 400 · hover           */
  --accent-lo: #6B9E00;    /* 600 · press           */

  --accent-glow:       rgba(136, 204, 0, 0.45);
  --accent-glow-soft:  rgba(136, 204, 0, 0.18);
  --accent-glow-faint: rgba(136, 204, 0, 0.06);

  /* Semantic aliases */
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-2);
  --text-muted:     var(--fg-3);
  --link:           var(--fg-2);
  --link-hover:     var(--fg);
  --cta-bg:         var(--accent);
  --cta-fg:         #0a1400;   /* near-black with lime cast */

  /* ========== TYPE FAMILIES ========== */
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-poster:  'DM Sans', 'Poppins', ui-sans-serif, sans-serif;
  --font-body:    'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ========== TYPE SCALE ========== */
  --display-xl: clamp(64px, 10vw, 144px);  /* hero                  */
  --display-lg: clamp(48px, 7vw,  96px);   /* section headers       */
  --display-md: clamp(36px, 5vw,  64px);   /* sub-section           */
  --display-sm: clamp(28px, 3.5vw, 40px);  /* card title large      */

  --text-lg:   20px;   /* lead paragraphs */
  --text-base: 16px;   /* body            */
  --text-sm:   14px;   /* small body      */
  --text-xs:   12px;   /* fine print      */

  --mono-sm:   11px;
  --mono-base: 13px;

  /* ========== LINE HEIGHT ========== */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.65;
  --lh-loose:  1.8;

  /* ========== LETTER SPACING ========== */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-mono:     0.18em;

  /* ========== SPACING (8-px base) ========== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --section-y: clamp(96px, 14vw, 192px);

  /* ========== LAYOUT ========== */
  --max-w:    1320px;
  --gutter:   clamp(20px, 5vw, 80px);
  --nav-h:    56px;  /* floating pill height */

  /* ========== RADIUS ========== */
  --radius-card-outer: 6px;  /* double-bezel: outer shell */
  --radius-card-inner: 4px;  /* double-bezel: inner core  */
  --radius-card:       2px;  /* legacy flat — keep for compat */
  --radius-button:     4px;
  --radius-pill:       999px;

  /* ========== BORDERS ========== */
  --border-rest:  1px solid var(--hairline);
  --border-hover: 1px solid var(--accent);

  /* ========== ELEVATION (glow only — no drop shadows) ========== */
  --glow-rest:   none;
  --glow-hover:  0 0 0 1px var(--accent), 0 0 32px -4px var(--accent-glow);
  --glow-cta:    0 0 0 1px var(--accent), 0 0 24px -2px var(--accent-glow);
  --glow-cta-hi: 0 0 0 1px var(--accent-hi), 0 0 48px -4px var(--accent-glow);

  /* ========== MOTION (Emil Kowalski) ==========
     Never use built-in ease/ease-in/ease-in-out for UI transitions.
     These curves have the punch built-in ones lack. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* entering elements */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* overlays, drawers */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);       /* generic standard  */

  --dur-press: 100ms;    /* button active feedback */
  --dur-fast:  160ms;    /* hover states           */
  --dur-base:  240ms;    /* standard transitions   */
  --dur-slow:  600ms;    /* scroll reveals         */
  --dur-pulse: 4000ms;   /* CTA bloom              */
}

/* ============================================================
   BASE RESETS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--display-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  max-width: 60ch;
}
.body, p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}
.body--primary { color: var(--fg); }

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--mono-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.code, code {
  font-family: var(--font-mono);
  font-size: var(--mono-base);
  color: var(--accent);
  background: transparent;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* ----- CTA Button (primary) -----
   Button-in-button architecture: text + nested .btn-icon container.
   Padding is asymmetric: generous left, tight right to flush-mount icon. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 8px 14px 22px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  box-shadow: var(--glow-cta);
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out),
    transform   var(--dur-press) var(--ease-out);
  animation: ctaPulse var(--dur-pulse) ease-in-out infinite;
  text-decoration: none;
  white-space: nowrap;
}

/* Nested icon container — the "button in a button" */
.cta .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover               { background: var(--accent-hi); box-shadow: var(--glow-cta-hi); }
  .cta:hover .btn-icon     { transform: translateX(2px); }
}
.cta:active { transform: scale(0.97); box-shadow: 0 0 0 1px var(--accent-lo); }

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 20px -4px var(--accent-glow-soft); }
  50%      { box-shadow: 0 0 0 1px var(--accent), 0 0 40px -4px var(--accent-glow); }
}

/* Ghost variant — no animation, no fill */
.cta--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--hairline);
  animation: none;
  padding: 14px 22px;
}
@media (hover: hover) and (pointer: fine) {
  .cta--ghost:hover {
    box-shadow: inset 0 0 0 1px var(--accent), 0 0 24px -8px var(--accent-glow);
    color: var(--accent);
  }
}
.cta--ghost:active { transform: scale(0.97); }

/* ----- Double-Bezel Card -----
   Outer shell holds the hover/glow state.
   Inner .card is the actual content surface. */
.card-shell {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card-outer);
  padding: 3px;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card-shell:hover { border-color: var(--accent); box-shadow: var(--glow-hover); }
}

.card {
  background: var(--surface);
  border-radius: var(--radius-card-inner);
  padding: var(--space-7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  height: 100%;
}

/* Legacy flat card — kept for backward compat */
.card--flat {
  background: var(--surface);
  border: var(--border-rest);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card--flat:hover { border-color: var(--accent); box-shadow: var(--glow-hover); }
}

/* ----- Scroll Reveal -----
   Elements start hidden (opacity 0, shifted down).
   IntersectionObserver adds .is-in to trigger the transition.
   Staggered siblings use --i CSS variable for delay. */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 0;
    transform: none;
    transition: opacity 0.3s ease;
  }
  .reveal.is-in { opacity: 1; }
  .word { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
  .cta { animation: none; }
}