/* ========================================================
   Jun Portfolio — design tokens & base styles
   ======================================================== */

:root {
  /* Default palette: "Ocean" — cool blue base + bright mint accent.
     The ink stays medium-deep (not jet-black) so the page feels light. */
  --bg: #e9f0f6;            /* soft cool blue, NOT beige */
  --bg-soft: #d8e3ed;
  --paper: #ffffff;
  --ink: #1d3654;           /* medium navy, lighter than before */
  --ink-2: #36506f;
  --ink-3: #6679919e;
  --ink-3: #66798f;
  --line: #c8d4df;

  --accent: oklch(0.80 0.13 168);     /* bright mint */
  --accent-2: oklch(0.88 0.09 170);   /* lighter mint */
  --accent-3: oklch(0.62 0.10 235);   /* deep ocean blue companion */
  --accent-tint: oklch(0.95 0.045 170);

  /* type */
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* spacing rhythm */
  --pad: clamp(20px, 4vw, 96px);
  --gutter: clamp(16px, 2.4vw, 40px);
  --section-y: clamp(96px, 12vw, 200px);

  /* radii */
  --r-card: 18px;
  --r-pill: 999px;
}

/* Palette options — all cool blue bases with mint-leaning accents. */
[data-palette="ocean"] {
  --bg: #e9f0f6;
  --bg-soft: #d8e3ed;
  --paper: #ffffff;
  --ink: #1d3654;
  --ink-2: #36506f;
  --ink-3: #66798f;
  --line: #c8d4df;
  --accent: oklch(0.80 0.13 168);
  --accent-2: oklch(0.88 0.09 170);
  --accent-3: oklch(0.62 0.10 235);
  --accent-tint: oklch(0.95 0.045 170);
}
[data-palette="arctic"] {
  --bg: #eff5f9;
  --bg-soft: #dfe9f1;
  --paper: #ffffff;
  --ink: #213c5e;
  --ink-2: #3d597d;
  --ink-3: #6b7e98;
  --line: #cad6e1;
  --accent: oklch(0.84 0.12 175);
  --accent-2: oklch(0.90 0.07 180);
  --accent-3: oklch(0.66 0.10 225);
  --accent-tint: oklch(0.96 0.035 175);
}
[data-palette="dusk"] {
  --bg: #eaeef5;
  --bg-soft: #d6dde9;
  --paper: #fbfcfd;
  --ink: #15243f;
  --ink-2: #2c3d5e;
  --ink-3: #5c6d8a;
  --line: #c5cedd;
  --accent: oklch(0.78 0.13 165);
  --accent-2: oklch(0.85 0.09 180);
  --accent-3: oklch(0.58 0.11 245);
  --accent-tint: oklch(0.94 0.04 165);
}
[data-palette="clover"] {
  --bg: #ecf1f1;
  --bg-soft: #dce5e5;
  --paper: #fafcfb;
  --ink: #1a3245;
  --ink-2: #344c61;
  --ink-3: #647986;
  --line: #c9d4d6;
  --accent: oklch(0.78 0.13 155);
  --accent-2: oklch(0.86 0.10 168);
  --accent-3: oklch(0.62 0.09 215);
  --accent-tint: oklch(0.95 0.04 160);
}

[data-mode="dark"] {
  --bg: #0e1320;
  --bg-soft: #141b2c;
  --paper: #1a2236;
  --ink: #eef0f5;
  --ink-2: #c4cad6;
  --ink-3: #8a93a7;
  --line: #29304a;
  --accent-tint: oklch(0.32 0.05 220);
}

[data-density="compact"] {
  --section-y: clamp(72px, 9vw, 140px);
  --pad: clamp(16px, 3vw, 64px);
}

[data-font="modern"] {
  --serif: "Instrument Serif", "Shippori Mincho B1", "Yu Mincho", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  scroll-behavior: smooth;
}

body { overflow-x: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--paper); }

/* layout */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--ink-3);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }

.muted { color: var(--ink-3); }

/* nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.brand {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.brand .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn .arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* card primitives */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -32px rgba(20, 34, 58, 0.18);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}

/* tag */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
}

/* dividers */
.rule {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* tiny utilities */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .nav-links { display: none; }
}