/* Highphen Portfolio — Shared Design Tokens (DEEP NAVY / editorial)
 * 深い藍(navy) × 霧白(mist) × 藍アクセント(azure) + 金(gold)。
 * Fonts: Cabinet Grotesk(display/UI) / Shippori Mincho B1(JP head) / Zen Kaku Gothic New(JP body) / IBM Plex Mono.
 */

:root {
  /* --- Color: 深い藍 base --- */
  --navy:       #0E1726;   /* base background — deep navy */
  --navy-2:     #14202F;   /* raised surface */
  --navy-3:     #1C2B40;   /* card / line background */
  --navy-line:  #25374F;   /* visible hairline on navy */
  --fg:         #EAF0F7;   /* primary foreground — mist white */
  --fg-soft:    #AEBED2;   /* secondary text */
  --muted:      #6F8197;   /* tertiary / captions */
  --accent:     #4F8BD0;   /* signature accent — bright azure (藍) */
  --accent-br:  #79ABE8;   /* accent bright / hover */
  --accent-dp:  #2C5E96;   /* accent deep */
  --gold:       #C9A24C;   /* secondary締め accent — gold (sparingly) */
  --line:       rgba(234,240,247,0.13);  /* hairline rules */
  --line-soft:  rgba(234,240,247,0.07);

  /* legacy aliases (modules / page.css may still read these) */
  --paper:      var(--navy);
  --paper-2:    var(--navy-2);
  --paper-3:    var(--navy-3);
  --ink:        var(--fg);
  --ink-soft:   var(--fg-soft);
  --sumi:       #1C2B40;
  --shu:        var(--accent);

  /* --- Type families --- */
  --font-display: 'Cabinet Grotesk', 'Shippori Mincho B1', serif;
  --font-ui:      'Cabinet Grotesk', 'Zen Kaku Gothic New', sans-serif;
  --font-jp-head: 'Shippori Mincho B1', 'Cabinet Grotesk', serif;
  --font-jp-body: 'Zen Kaku Gothic New', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* --- Fluid type scale (clamp) --- */
  --fs-hero:   clamp(3rem, 9vw, 8.5rem);
  --fs-h1:     clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-h2:     clamp(1.6rem, 3.2vw, 2.6rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.4rem);
  --fs-body:   clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-cap:    clamp(0.72rem, 0.9vw, 0.82rem);

  /* --- Spacing & rhythm --- */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem;
  --sp-5: 4rem;  --sp-6: 6rem;  --sp-7: 9rem;   --sp-8: 14rem;
  --maxw: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}