/* =========================================================================
   KWtech website — theme system (light + dark) + layout + responsive
   =========================================================================
   How to change the default mode:
     Open  website/theme-init.js  and edit the DEFAULT_THEME constant at the
     top of the file. That is the ONLY place you need to touch.

   Sections in this file:
     1. Light theme tokens
     2. Dark theme tokens
     3. Color scheme + logo swap + theme transitions
     4. Layout classes (header, footer, page grids, headings)
     5. Responsive media queries (hamburger breakpoint 900px, tight 480px)
     6. View Transition animations (forward / back slide+fade)
   ========================================================================= */

/* ── 1. LIGHT ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Surfaces */
  --bg:            #FDF9F6;             /* page background */
  --bg-surface:    #F0F4F7;             /* sections (Products, About values, footer) */
  --bg-card:       #FDF9F6;             /* card backgrounds on the page */
  --bg-nav:        rgba(253, 249, 246, 0.86);
  --bg-nav-active: rgba(255, 255, 255, 0.7);
  --bg-input:      rgba(255, 255, 255, 0.6);
  --bg-pill-warm:  #F7EBE0;             /* "Independent software studio" pill */
  --fg-pill-warm:  #9c5a3e;

  /* Text */
  --fg:            #2A2A2A;             /* headings */
  --fg-body:       #555555;             /* body copy */
  --fg-muted:      #666666;             /* eyebrows + footer text */

  /* Borders */
  --border:        rgba(170, 170, 170, 0.18);
  --border-strong: rgba(170, 170, 170, 0.25);
  --border-input:  rgba(170, 170, 170, 0.35);

  /* Primary CTA button (inverts in dark mode) */
  --btn-cta-bg:     #2A2A2A;
  --btn-cta-fg:     #FFFFFF;
  --btn-cta-shadow: 0 4px 12px rgba(51, 51, 51, 0.18);

  /* Brand accents — same in both modes */
  --accent-coral:   #FF8C6B;
  --accent-coral-d: #E07B5C;
  --accent-blue:    #4D7DA3;
  --accent-green:   #5A8038;
  --accent-purple:  #B388EB;

  /* LEAP phone mockup (warm picture-book palette) */
  --mock-bg:                  #FDF4ED;
  --mock-bezel:               #2A2A2A;
  --mock-status:              #2A2A2A;
  --mock-corner-bg:           #F7EBE0;
  --mock-corner-fg:           #E07B5C;
  --mock-progress-track:      rgba(247, 235, 224, 0.7);
  --mock-counter:             #9c5a3e;
  --mock-card-bg:             #E0E7EB;             /* soft baby blue */
  --mock-card-shadow:         0 8px 24px rgba(106, 153, 194, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  --mock-card-text:           #2A2A2A;
  --mock-card-reading:        #4D7DA3;             /* deep blue, matches card */
  --mock-input-bg:            rgba(255, 255, 255, 0.55);
  --mock-input-border:        rgba(224, 123, 92, 0.45);
  --mock-input-placeholder:   #bca08e;
  --mock-eyebrow:             #9c5a3e;
  --mock-hint-bg:             #F7EBE0;
  --mock-hint-fg:             #9c5a3e;
  --mock-hint-shadow:         #D9BFA8;
}

/* ── 2. DARK ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Surfaces */
  --bg:            #1B1814;             /* warm near-black */
  --bg-surface:    #231F1A;             /* one notch up */
  --bg-card:       #261F1A;             /* cards on the page — slightly distinct */
  --bg-nav:        rgba(27, 24, 20, 0.86);
  --bg-nav-active: rgba(255, 255, 255, 0.06);
  --bg-input:      rgba(255, 255, 255, 0.04);
  --bg-pill-warm:  #3a2c22;             /* dim peach */
  --fg-pill-warm:  #f1b58e;             /* lighter coral for contrast */

  /* Text */
  --fg:            #F0ECE5;
  --fg-body:       #C5BFB6;
  --fg-muted:      #9C968B;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-input:  rgba(255, 255, 255, 0.18);

  /* Primary CTA button — inverted */
  --btn-cta-bg:     #F0ECE5;
  --btn-cta-fg:     #1B1814;
  --btn-cta-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

  /* Brand accents — same in both modes */
  --accent-coral:   #FF8C6B;
  --accent-coral-d: #E07B5C;
  --accent-blue:    #6A99C2;             /* slightly lifted from light for contrast */
  --accent-green:   #8BC34A;
  --accent-purple:  #B388EB;

  /* LEAP phone mockup — neutral dark charcoal with warm accents */
  --mock-bg:                  #1A1B20;             /* cool-neutral charcoal */
  --mock-bezel:               #0C0D11;
  --mock-status:              #E8E4DD;
  --mock-corner-bg:           #2D2A30;             /* neutral corner pill */
  --mock-corner-fg:           #F1B58E;
  --mock-progress-track:      rgba(255, 255, 255, 0.07);
  --mock-counter:             #D6BFA8;
  --mock-card-bg:             #2C282E;             /* neutral card, slight warm hint */
  --mock-card-shadow:         0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 220, 200, 0.08);
  --mock-card-text:           #F4E4D2;             /* cream kanji */
  --mock-card-reading:        #D6B89A;
  --mock-input-bg:            rgba(255, 255, 255, 0.04);
  --mock-input-border:        rgba(255, 140, 107, 0.45);
  --mock-input-placeholder:   #8a8088;
  --mock-eyebrow:             #D6B89A;
  --mock-hint-bg:             #26242A;
  --mock-hint-fg:             #F1B58E;
  --mock-hint-shadow:         #18171C;
}

/* ── 3. SCHEME + LOGO SWAP + THEME TRANSITIONS ────────────────────────── */
html { color-scheme: light dark; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* Logo swap — both PNGs render but only one is visible per theme. */
.kw-logo-light, .kw-logo-dark { display: block; }
[data-theme="dark"] .kw-logo-light { display: none; }
[data-theme="light"] .kw-logo-dark { display: none; }

body, header, footer, section, main, div, button, a, p, h1, h2, h3, h4 {
  transition:
    background-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  body, header, footer, section, main, div, button, a, p, h1, h2, h3, h4 {
    transition: none;
  }
}

/* ── 4. LAYOUT CLASSES ────────────────────────────────────────────────── */

/* Header */
.kw-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-nav);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.kw-nav-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Desktop nav links */
.kw-nav-desktop {
  display: flex;
  gap: 4px;
}
.kw-nav-link {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-muted);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  background: transparent;
  transition: all 1800ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kw-nav-link.is-active {
  color: var(--fg);
  background: var(--bg-nav-active);
}

/* Hamburger button */
.kw-nav-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--bg-nav-active);
  color: var(--fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 8px;
  transition: background 1800ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kw-burger {
  width: 18px;
  height: 14px;
  position: relative;
  display: inline-block;
}
.kw-burger span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 2200ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 1800ms cubic-bezier(0.32, 0.72, 0, 1),
              top 2200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kw-burger span:nth-child(1) { top: 0;   }
.kw-burger span:nth-child(2) { top: 6px; }
.kw-burger span:nth-child(3) { top: 12px;}
.kw-burger.is-open span:nth-child(1) { top: 6px; transform: rotate(45deg);  }
.kw-burger.is-open span:nth-child(2) { opacity: 0; }
.kw-burger.is-open span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Mobile dropdown sheet */
.kw-nav-sheet {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  transition: max-height 2200ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity    2000ms cubic-bezier(0.32, 0.72, 0, 1);
}
.kw-nav-sheet.is-open {
  max-height: 400px;
  opacity: 1;
}
.kw-nav-sheet-link {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  padding: 16px 32px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.kw-nav-sheet-link:last-child { border-bottom: 0; }
.kw-nav-sheet-link.is-active  { background: var(--bg-nav-active); }

/* Section padding (consistent across pages) */
.kw-section { padding: 80px 32px; }
.kw-section-tight { padding: 80px 32px 40px; }
.kw-section-hero  { padding: 80px 32px 60px; }

/* Hero / page heading rhythm */
.kw-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.kw-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.kw-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.kw-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kw-values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.kw-contact-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* LEAP phone mockup — scales down on small screens. `zoom` is supported
   across modern browsers (Chrome/Safari always, Firefox since 126) and keeps
   layout flow correct, unlike transform: scale(). */
.kw-leap-mockup-wrap {
  display: flex;
  justify-content: center;
}

/* Footer */
.kw-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.kw-footer-base {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-strong);
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--fg-muted);
  gap: 16px;
}

/* ── 5. RESPONSIVE ────────────────────────────────────────────────────── */

/* 5a. Mobile + small tablet: hamburger, stacked layouts (≤ 900px) */
@media (max-width: 900px) {
  .kw-nav-desktop   { display: none; }
  .kw-nav-hamburger { display: inline-flex; }
  .kw-nav-sheet     { display: block; }

  .kw-nav-row { padding: 14px 20px; }
  .kw-section       { padding: 56px 20px; }
  .kw-section-tight { padding: 56px 20px 28px; }
  .kw-section-hero  { padding: 56px 20px 36px; }

  .kw-hero-grid,
  .kw-products-grid,
  .kw-principles-grid,
  .kw-values-grid,
  .kw-contact-rows,
  .kw-footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .kw-footer-grid { gap: 32px; }
  .kw-contact-rows { gap: 12px; }
  .kw-values-grid  { gap: 24px; }

  /* Footer base wraps; copy stacks under the right-side bit on narrow screens. */
  .kw-footer-base { flex-wrap: wrap; }

  /* Heading shrinks for narrow viewports. */
  .kw-h1-hero,
  .kw-h1-page { font-size: 44px !important; }
  .kw-h2-large{ font-size: 32px !important; }
  .kw-h2      { font-size: 30px !important; }
  .kw-lead    { font-size: 19px !important; }
  .kw-mission-lead { font-size: 28px !important; }
  .kw-contact-primary-email { font-size: 34px !important; }

  /* LEAP mockup shrinks slightly so it fits without scrollbars. */
  .kw-leap-mockup-wrap { zoom: 0.85; }
}

/* 5b. Phones (≤ 480px) — tighter spacing, smaller display type */
@media (max-width: 480px) {
  .kw-nav-row { padding: 12px 16px; }
  .kw-section       { padding: 48px 16px; }
  .kw-section-tight { padding: 48px 16px 24px; }
  .kw-section-hero  { padding: 48px 16px 32px; }

  .kw-h1-hero,
  .kw-h1-page { font-size: 36px !important; }
  .kw-h2-large{ font-size: 28px !important; }
  .kw-h2      { font-size: 26px !important; }
  .kw-lead    { font-size: 17px !important; }
  .kw-mission-lead { font-size: 24px !important; }
  .kw-contact-primary-email { font-size: 28px !important; }

  /* CTAs stack so they don't squeeze. */
  .kw-hero-ctas > button { width: 100%; }

  .kw-leap-mockup-wrap { zoom: 0.75; }
}

/* ── 6. VIEW TRANSITIONS ──────────────────────────────────────────────── */
/*
   Direction is set by Router.jsx on <html data-vt-direction="forward|back">
   right before document.startViewTransition() runs.

   FORWARD: new page slides + fades in from the right, on top.
            Old page stays put underneath, no animation.
   BACK:    old page slides + fades out to the right, on top.
            New page stays put underneath, no animation.

   The pseudo-elements ::view-transition-old(root) and -new(root) are
   automatically created by the browser. Setting `animation: none` defeats
   the default cross-fade for the layer that should remain static.
*/

/* Forward */
html[data-vt-direction="forward"]::view-transition-old(root) {
  animation: none;
  z-index: 1;
}
html[data-vt-direction="forward"]::view-transition-new(root) {
  animation: 2200ms cubic-bezier(0.32, 0.72, 0, 1) both kwVtSlideInFromRight;
  z-index: 2;
}

/* Back */
html[data-vt-direction="back"]::view-transition-old(root) {
  animation: 2200ms cubic-bezier(0.32, 0.72, 0, 1) both kwVtSlideOutToRight;
  z-index: 2;
}
html[data-vt-direction="back"]::view-transition-new(root) {
  animation: none;
  z-index: 1;
}

@keyframes kwVtSlideInFromRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes kwVtSlideOutToRight {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(48px); }
}

/* Reduced motion: no slide, no fade. Just swap. */
@media (prefers-reduced-motion: reduce) {
  html[data-vt-direction]::view-transition-old(root),
  html[data-vt-direction]::view-transition-new(root) {
    animation: none !important;
  }
}

/* CSS-only fallback for browsers without View Transitions support.
   The new <main> animates in from the right; old page is gone before the
   animation runs (React swaps the component), so there's no leaving anim. */
@supports not (view-transition-name: none) {
  main { animation: kwFallbackSlideIn 2200ms cubic-bezier(0.32, 0.72, 0, 1) both; }
  @media (prefers-reduced-motion: reduce) {
    main { animation: none; }
  }
}
@keyframes kwFallbackSlideIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}