/* ============================================================
   Lipoker — lpk-base.css
   CSS custom properties, resets, typography, utilities
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');
/* Font Awesome Free CDN */

/* --- CSS Custom Properties --- */
:root {
  /* Palette */
  --lpk-bg-dark:       #0F1923;
  --lpk-bg-dark-alt:   #172231;
  --lpk-bg-dark-deep:  #090E15;
  --lpk-bg-felt:       #0D2B1A;
  --lpk-bg-light:      #F8FAFC;
  --lpk-bg-white:      #FFFFFF;
  --lpk-surface-card:  #172231;
  --lpk-border-dark:   rgba(255,255,255,0.1);
  --lpk-border-light:  rgba(15,25,35,0.12);

  /* Foreground */
  --lpk-fg-dark-primary:   #F0F4F8;
  --lpk-fg-dark-secondary: #94A3B8;
  --lpk-fg-light-primary:  #0F1923;
  --lpk-fg-light-secondary:#475569;

  /* Accents */
  --lpk-green:         #2ECC71;
  --lpk-green-aa:      #27AE60;
  --lpk-green-light:   #16A34A; /* on-light AA */
  --lpk-amber:         #F39C12;
  --lpk-violet:        #8B5CF6;
  --lpk-violet-aa:     #A78BFA;

  /* Typography */
  --lpk-font-display: 'Syne', system-ui, sans-serif;
  --lpk-font-body:    'Inter', system-ui, sans-serif;
  --lpk-font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Scale */
  --lpk-text-display-xl: clamp(2.75rem, 6vw, 5rem);
  --lpk-text-display-lg: clamp(2rem, 4vw, 3.5rem);
  --lpk-text-h2:         clamp(1.6rem, 3vw, 2.5rem);
  --lpk-text-h3:         clamp(1.15rem, 2vw, 1.5rem);
  --lpk-text-body-lg:    1.125rem;
  --lpk-text-body:       1rem;
  --lpk-text-small:      0.875rem;

  /* Spacing */
  --lpk-section-pad: clamp(4rem, 8vw, 7rem);
  --lpk-container-max: 1200px;
  --lpk-container-pad: clamp(1.25rem, 4vw, 2rem);

  /* Nav height */
  --lpk-nav-h: 68px;

  /* Radius */
  --lpk-radius-sm:  6px;
  --lpk-radius-md:  12px;
  --lpk-radius-lg:  20px;
  --lpk-radius-xl:  28px;
  --lpk-radius-pill:9999px;

  /* Shadows */
  --lpk-shadow-card: 0 2px 20px rgba(0,0,0,0.4);
  --lpk-shadow-glow-green: 0 0 40px rgba(46,204,113,0.15);
  --lpk-shadow-glow-violet: 0 0 40px rgba(139,92,246,0.15);

  /* Transitions */
  --lpk-transition: 200ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--lpk-font-body);
  font-size: var(--lpk-text-body);
  line-height: 1.7;
  background: var(--lpk-bg-dark);
  color: var(--lpk-fg-dark-primary);
  -webkit-font-smoothing: antialiased;
}
body.lpk-page--light-top {
  background: var(--lpk-bg-light);
  color: var(--lpk-fg-light-primary);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
}
address { font-style: normal; }

/* --- Container --- */
.lpk-container {
  max-width: var(--lpk-container-max);
  margin: 0 auto;
  padding: 0 var(--lpk-container-pad);
}

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

/* --- Typography helpers --- */
.lpk-eyebrow {
  font-family: var(--lpk-font-body);
  font-size: var(--lpk-text-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Scoped eyebrow colors */
.lpk-section--dark .lpk-eyebrow,
.lpk-section--dark-alt .lpk-eyebrow,
.lpk-section--dark-felt .lpk-eyebrow,
.lpk-hero .lpk-eyebrow,
.lpk-footer .lpk-eyebrow {
  color: var(--lpk-green-aa);
}
body.lpk-page--light-top .lpk-eyebrow,
.lpk-section--light .lpk-eyebrow,
.lpk-section--light-alt .lpk-eyebrow {
  color: var(--lpk-green-light);
}

.lpk-display-xl {
  font-family: var(--lpk-font-display);
  font-size: var(--lpk-text-display-xl);
  font-weight: 800;
  line-height: 1.1;
}
.lpk-display-lg {
  font-family: var(--lpk-font-display);
  font-size: var(--lpk-text-display-lg);
  font-weight: 800;
  line-height: 1.15;
}
.lpk-h2 {
  font-family: var(--lpk-font-display);
  font-size: var(--lpk-text-h2);
  font-weight: 700;
  line-height: 1.2;
}
.lpk-h3 {
  font-family: var(--lpk-font-display);
  font-size: var(--lpk-text-h3);
  font-weight: 700;
  line-height: 1.3;
}

/* Heading colors scoped by container */
.lpk-section--dark h1, .lpk-section--dark h2, .lpk-section--dark h3,
.lpk-section--dark-alt h1, .lpk-section--dark-alt h2, .lpk-section--dark-alt h3,
.lpk-section--dark-felt h1, .lpk-section--dark-felt h2, .lpk-section--dark-felt h3,
.lpk-hero h1, .lpk-hero h2, .lpk-hero h3,
.lpk-footer h3 {
  color: var(--lpk-fg-dark-primary);
}
body.lpk-page--light-top h1,
body.lpk-page--light-top h2,
body.lpk-page--light-top h3,
.lpk-section--light h1, .lpk-section--light h2, .lpk-section--light h3,
.lpk-section--light-alt h1, .lpk-section--light-alt h2, .lpk-section--light-alt h3 {
  color: var(--lpk-fg-light-primary);
}

/* Body text scoped */
.lpk-section--dark p, .lpk-section--dark li,
.lpk-section--dark-alt p, .lpk-section--dark-alt li,
.lpk-section--dark-felt p, .lpk-section--dark-felt li {
  color: var(--lpk-fg-dark-secondary);
}
body.lpk-page--light-top p,
body.lpk-page--light-top li,
.lpk-section--light p, .lpk-section--light li,
.lpk-section--light-alt p, .lpk-section--light-alt li {
  color: var(--lpk-fg-light-secondary);
}

/* --- Fade-in animation --- */
@keyframes lpk-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lpk-card-slide {
  from { opacity: 0; transform: translateX(-30px) rotate(-6deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-6deg); }
}

.lpk-fade-up {
  opacity: 0;
  transform: translateY(24px);
}
.lpk-fade-up.lpk-visible {
  animation: lpk-fade-up 0.6s ease forwards;
}

/* Failsafe: after 1.2s force visible */
@keyframes lpk-failsafe {
  to { opacity: 1; transform: none; }
}
.lpk-fade-up {
  animation: lpk-failsafe 0.1s 1.2s forwards;
}
.lpk-fade-up.lpk-visible {
  animation: lpk-fade-up 0.6s ease forwards;
}

/* --- Section background helpers --- */
.lpk-section--dark      { background: var(--lpk-bg-dark); }
.lpk-section--dark-alt  { background: var(--lpk-bg-dark-alt); }
.lpk-section--dark-felt { background: var(--lpk-bg-felt); }
.lpk-section--light     { background: var(--lpk-bg-light); }
.lpk-section--light-alt { background: #EFF2F7; }
.lpk-section--white     { background: var(--lpk-bg-white); }

/* --- Divider --- */
.lpk-divider {
  height: 1px;
  border: none;
}
.lpk-section--dark .lpk-divider,
.lpk-section--dark-alt .lpk-divider {
  background: var(--lpk-border-dark);
}
body.lpk-page--light-top .lpk-divider,
.lpk-section--light .lpk-divider {
  background: var(--lpk-border-light);
}

/* --- Utility --- */
.lpk-text-center { text-align: center; }
.lpk-text-green  { color: var(--lpk-green-aa); }
.lpk-text-amber  { color: var(--lpk-amber); }
.lpk-text-violet { color: var(--lpk-violet-aa); }
.lpk-mt-1  { margin-top: 0.5rem; }
.lpk-mt-2  { margin-top: 1rem; }
.lpk-mt-3  { margin-top: 1.5rem; }
.lpk-mt-4  { margin-top: 2rem; }
.lpk-mt-6  { margin-top: 3rem; }
.lpk-mb-2  { margin-bottom: 1rem; }
.lpk-mb-4  { margin-bottom: 2rem; }
.lpk-gap-1 { gap: 0.5rem; }
.lpk-gap-2 { gap: 1rem; }
.lpk-gap-3 { gap: 1.5rem; }
.lpk-gap-4 { gap: 2rem; }
.lpk-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Responsive grid helpers --- */
.lpk-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.lpk-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.lpk-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1023px) {
  .lpk-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .lpk-grid-2,
  .lpk-grid-3,
  .lpk-grid-4 { grid-template-columns: 1fr; }
}

/* --- Flex helpers --- */
.lpk-flex        { display: flex; }
.lpk-flex-center { display: flex; align-items: center; justify-content: center; }
.lpk-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.lpk-flex-col    { display: flex; flex-direction: column; }
.lpk-flex-gap-2  { display: flex; gap: 1rem; }
.lpk-flex-gap-3  { display: flex; gap: 1.5rem; }
.lpk-flex-wrap   { flex-wrap: wrap; }
.lpk-align-start { align-items: flex-start; }