/* ──────────────────────────────────────────────────────────────────────────
 * Fredges Ltd. — corporate site styles
 * Tokens, fonts, themes, motion, hover states.
 * ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper, #f4f2ec); }
body {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
#root { width: 100%; min-height: 100vh; }

/* ── design tokens ───────────────────────────────────────────────────────── */
.fredges-scope {
  --ink:    oklch(0.16 0.02 150);
  --paper:  oklch(0.98 0.005 140);
  --forest: oklch(0.32 0.06 155);
  --moss:   oklch(0.46 0.10 145);
  --lime:   oklch(0.85 0.18 130);
  --mist:   oklch(0.94 0.01 150);
  --rule:   oklch(0.85 0.01 150);
  color: var(--ink);
  font-family: 'Noto Sans JP', sans-serif;
}
.fredges-scope[data-theme="midnight"] {
  --ink:    oklch(0.95 0.01 150);
  --paper:  oklch(0.16 0.03 155);
  --forest: oklch(0.85 0.18 130);
  --moss:   oklch(0.72 0.13 145);
  --lime:   oklch(0.85 0.18 130);
  --mist:   oklch(0.22 0.03 155);
  --rule:   oklch(0.30 0.02 150);
}
.fredges-scope[data-theme="paper"] {
  --ink:    oklch(0.18 0.01 80);
  --paper:  oklch(0.97 0.012 90);
  --forest: oklch(0.32 0.06 155);
  --moss:   oklch(0.46 0.10 145);
  --lime:   oklch(0.72 0.16 60);
  --mist:   oklch(0.93 0.02 90);
  --rule:   oklch(0.85 0.02 90);
}
.fredges-scope[data-theme="ink"] {
  --ink:    oklch(0.95 0.005 230);
  --paper:  oklch(0.13 0.01 240);
  --forest: oklch(0.75 0.14 200);
  --moss:   oklch(0.60 0.12 210);
  --lime:   oklch(0.86 0.17 195);
  --mist:   oklch(0.20 0.02 230);
  --rule:   oklch(0.30 0.02 230);
}

/* ── type helpers ────────────────────────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', monospace; }
.en   { font-family: 'Inter', sans-serif; }
.jp   { font-family: 'Noto Sans JP', sans-serif; }

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s cubic-bezier(.16,.84,.32,1),
    transform .9s cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── hover states ────────────────────────────────────────────────────────── */
.fredges-cta { transition: transform .25s ease; }
.fredges-cta:hover { transform: translateY(-2px); }
.fredges-cta:hover .cta-circle { transform: translateX(4px); }

.fredges-service-card { transition: background .25s ease; }
.fredges-service-card:hover {
  background: color-mix(in oklch, var(--mist) 70%, transparent);
}
.fredges-service-card:hover .service-arrow { transform: translateX(6px); }

.fredges-scope nav ul li span { transition: border-color .2s ease, color .2s ease; }
.fredges-scope nav ul li:hover span {
  border-color: var(--lime) !important;
  color: var(--forest);
}

.fredges-strength-row { transition: background .2s ease; }
.fredges-strength-row:hover {
  background: color-mix(in oklch, var(--lime) 6%, transparent);
}

/* ── live shell ──────────────────────────────────────────────────────────── */
.live-shell { max-width: min(100%, 1600px); margin: 0 auto; }
image-slot { display: block; }