/* KAMI Workforce — Colors & Type
   Source: kamiworkforce.com/ph-hris-lp/ + KAMI homepage handover (May 2026).
   Fonts: Poppins (self-hosted, all weights 100–900 + italics) + Red Hat Text (Google Fonts). */

/* ── Poppins (self-hosted brand font) ───────────────────────────────────── */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100;
  src: url('fonts/Poppins-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100;
  src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200;
  src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200;
  src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300;
  src: url('fonts/Poppins-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300;
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400;
  src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400;
  src: url('fonts/Poppins-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500;
  src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500;
  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600;
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700;
  src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700;
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800;
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800;
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900;
  src: url('fonts/Poppins-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900;
  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display: swap; }

/* Red Hat Text — meta/eyebrow, self-hosted */
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 300;
  src: url('fonts/RedHatText-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: italic; font-weight: 300;
  src: url('fonts/RedHatText-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 400;
  src: url('fonts/RedHatText-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: italic; font-weight: 400;
  src: url('fonts/RedHatText-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 500;
  src: url('fonts/RedHatText-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: italic; font-weight: 500;
  src: url('fonts/RedHatText-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 600;
  src: url('fonts/RedHatText-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: italic; font-weight: 600;
  src: url('fonts/RedHatText-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: normal; font-weight: 700;
  src: url('fonts/RedHatText-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Red Hat Text'; font-style: italic; font-weight: 700;
  src: url('fonts/RedHatText-BoldItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ── Brand color palette (exact values from LP) ─────────────────────── */
  --kami-navy:       #0C2034;  /* hero / footer background */
  --kami-navy-soft:  #0F1629;  /* secondary dark (footer variant) */
  --kami-blue:       #365AC1;  /* PRIMARY — buttons, links, accents */
  --kami-blue-deep:  #2B49A0;  /* primary hover/pressed */
  --kami-blue-bright:#3DA8FF;  /* H1/D1 emphasis on dark backgrounds */
  --kami-teal:       #36A0C1;  /* secondary accent */
  --kami-orange:     #F27127;  /* highlight / CTA accent */
  --kami-orange-deep:#D85E18;  /* orange hover */

  /* App-specific accents observed in product screens */
  --kami-violet:     #5B4DE0;  /* mobile app primary (check-in screen) */
  --kami-mint:       #10B981;  /* status: working / success */
  --kami-amber:      #D4A017;  /* status: pending */
  --kami-rose:       #E5484D;  /* status: rejected / overdue */

  /* ── Neutrals & surfaces ────────────────────────────────────────────── */
  --kami-fg:         #1A1F2E;  /* headlines on light bg */
  --kami-fg-body:    #4D4D4D;  /* exact LP body text */
  --kami-fg-muted:   #6B7280;  /* meta, captions */
  --kami-fg-faint:   #9CA3AF;  /* footer link text, placeholder */
  --kami-on-dark:    #FFFFFF;
  --kami-on-dark-muted: #B8C2D1;

  --kami-bg:         #FFFFFF;
  --kami-bg-warm:    #F9F7F4;  /* warm white alt section */
  --kami-bg-cool:    #F7F8FC;  /* cool white alt section */
  --kami-bg-grey:    #F8FAFC;  /* social proof bar / testimonial cards */
  --kami-border:     #E5E7EB;
  --kami-border-soft:#EEF0F4;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --kami-font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --kami-font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --kami-font-meta:    'Red Hat Text', 'Poppins', system-ui, sans-serif;
  --kami-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Base sizes — exact from LP */
  --kami-size-base: 17px;
  --kami-line-base: 34px;       /* 2x — exact LP value */

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --kami-space-1: 4px;
  --kami-space-2: 8px;
  --kami-space-3: 12px;
  --kami-space-4: 16px;
  --kami-space-5: 20px;         /* element spacing & section h-pad */
  --kami-space-6: 24px;
  --kami-space-7: 32px;
  --kami-space-8: 48px;         /* row gap */
  --kami-space-9: 64px;         /* section v-pad */
  --kami-space-10: 96px;

  /* ── Radii (default 6 across surfaces; product UI uses 8–16) ───────── */
  --kami-radius-0: 0px;
  --kami-radius-sm: 6px;          /* DEFAULT — cards, images, buttons, inputs */
  --kami-radius-md: 10px;
  --kami-radius-lg: 16px;
  --kami-radius-pill: 999px;

  /* ── Shadows (sparingly — LP has none; product UI uses very subtle) ─── */
  --kami-shadow-none: none;
  --kami-shadow-card: 0 1px 2px rgba(15, 22, 41, 0.04), 0 1px 1px rgba(15, 22, 41, 0.03);
  --kami-shadow-pop:  0 8px 24px rgba(15, 22, 41, 0.08);

  /* ── Transitions (exact LP values) ──────────────────────────────────── */
  --kami-trans-color: 0.3s ease;
  --kami-trans-trans: 0.4s ease;

  /* ── Container widths ───────────────────────────────────────────────── */
  --kami-container: 1200px;
  --kami-container-narrow: 960px;
}

/* ── Semantic element styles ─────────────────────────────────────────── */

html, body {
  font-family: var(--kami-font-body);
  font-size: var(--kami-size-base);
  line-height: var(--kami-line-base);
  font-weight: 300;
  color: var(--kami-fg-body);
  background: var(--kami-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .kami-h1 {
  font-family: var(--kami-font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--kami-fg);
  margin: 0;
}

/* H1/D1 (and H2) emphasis — wrap a key phrase in <span class="kami-emphasis"> inside
   any h1/h2/.kami-h1/.kami-h2, or apply .kami-h1-emphasis directly. Bright electric
   blue #3DA8FF (--kami-blue-bright) at weight 500 against the light (300)
   base creates a high-energy accent on dark navy. */
.kami-h1-emphasis,
h1 .kami-emphasis,
h2 .kami-emphasis,
.kami-h1 .kami-emphasis,
.kami-h2 .kami-emphasis {
  color: var(--kami-blue-bright);
  font-weight: 500;
}

h2, .kami-h2 {
  font-family: var(--kami-font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--kami-fg);
  margin: 0;
}

h3, .kami-h3 {
  font-family: var(--kami-font-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  color: var(--kami-fg);
  margin: 0;
}

h4, .kami-h4 {
  font-family: var(--kami-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--kami-fg);
  margin: 0;
}

p, .kami-p {
  font-size: var(--kami-size-base);
  line-height: var(--kami-line-base);
  font-weight: 300;
  color: var(--kami-fg-body);
  margin: 0;
}

.kami-eyebrow,
.kami-meta {
  font-family: var(--kami-font-meta);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kami-fg-muted);
}

.kami-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--kami-radius-pill);
  font-family: var(--kami-font-meta);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kami-stat-num {
  font-family: var(--kami-font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kami-fg);
}

a {
  color: var(--kami-blue);
  text-decoration: none;
  transition: color var(--kami-trans-color);
}
a:hover { color: var(--kami-blue-deep); }

code, .kami-mono {
  font-family: var(--kami-font-mono);
  font-size: 0.92em;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.kami-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--kami-font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--kami-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--kami-trans-color), border var(--kami-trans-color),
              box-shadow var(--kami-trans-color), transform var(--kami-trans-trans),
              color var(--kami-trans-color);
}
.kami-btn--primary {
  background: var(--kami-blue);
  color: #fff;
  border-color: var(--kami-blue);
}
.kami-btn--primary:hover { background: var(--kami-blue-deep); border-color: var(--kami-blue-deep); }
.kami-btn--accent {
  background: var(--kami-orange);
  color: #fff;
  border-color: var(--kami-orange);
}
.kami-btn--accent:hover { background: var(--kami-orange-deep); border-color: var(--kami-orange-deep); }
.kami-btn--ghost {
  background: transparent;
  color: var(--kami-blue);
  border-color: var(--kami-blue);
}
.kami-btn--ghost:hover { background: rgba(54, 90, 193, 0.06); }
.kami-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.kami-btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); }


/* === responsive overrides === */
/* KAMI homepage — responsive overrides.
   Page layouts use inline-style grids; this sheet collapses them at tablet & phone.
   Each section is targeted via data-screen-label on its <section>; inner grids
   get class hooks (.kami-grid-3, .kami-grid-4, .kami-grid-2-header) where needed. */

/* ===== Tablet (≤1024px) ===== */
@media (max-width: 1024px) {
  /* Section padding pulls in */
  section[data-screen-label] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section[data-screen-label] > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero — stack image below copy */
  section[data-screen-label="Hero"] > div,
  div[data-screen-label="Hero"] > div {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    text-align: left;
  }

  /* Problem — 4 cards become 2x2 */
  section[data-screen-label="Problem"] .kami-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pillars / Stats / Pricing / Steps card rows — 3 cols become 2 cols on tablet */
  section[data-screen-label="Pillars"] .kami-grid-3,
  section[data-screen-label="Stats"] .kami-grid-3,
  section[data-screen-label="Pricing"] .kami-grid-3,
  section[data-screen-label="Steps"] .kami-grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Steps & Pricing two-col headers stack */
  section[data-screen-label="Steps"] .kami-grid-2-header,
  section[data-screen-label="Pricing"] .kami-grid-2-header {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Team — image and text stack */
  section[data-screen-label="Team"] > div,
  div[data-screen-label="Team"] > div {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Footer — collapse columns */
  footer .kami-footer-grid {
    grid-template-columns: 1.4fr repeat(2, 1fr) !important;
    gap: 36px !important;
  }
}

/* ===== Phone (≤640px) ===== */
@media (max-width: 640px) {
  section[data-screen-label] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  section[data-screen-label] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Everything multi-column collapses to a single column */
  section[data-screen-label="Problem"] .kami-grid-4,
  section[data-screen-label="Pillars"] .kami-grid-3,
  section[data-screen-label="Stats"] .kami-grid-3,
  section[data-screen-label="Pricing"] .kami-grid-3,
  section[data-screen-label="Steps"] .kami-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Pricing — featured card no longer needs to lift up on mobile */
  section[data-screen-label="Pricing"] .kami-grid-3 > * {
    transform: none !important;
  }

  /* Footer — single column */
  footer .kami-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer .kami-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Marquee logos — slow down + smaller */
  .kami-marquee-logo img {
    height: 28px !important;
  }

  /* Testimonial / Guarantee — pull padding in, allow wrapping */
  section[data-screen-label="Testimonial"] > div,
  section[data-screen-label="Guarantee"] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero CTA row wraps */
  section[data-screen-label="Hero"] .kami-cta-row,
  div[data-screen-label="Hero"] .kami-cta-row {
    flex-wrap: wrap !important;
  }
}

/* ===== Nav: hide desktop center+CTA on small screens, show hamburger ===== */
@media (max-width: 900px) {
  .kami-nav-desktop { display: none !important; }
  .kami-nav-hamburger { display: inline-flex !important; }
}
@media (min-width: 901px) {
  .kami-nav-hamburger,
  .kami-nav-mobile-drawer { display: none !important; }
}