/* nae Design System — Design Tokens */

:root {
  /* === Colors — Document Palette === */
  --nae-ink: #3A303A;          /* Dark Purple — body */
  --nae-ink-strong: #1B1620;   /* near-black for display type */
  --nae-blue: #364EEC;         /* Royal Blue — main accent */
  --nae-blue-deep: #1F2DA8;    /* depressed/active */
  --nae-red: #F23B4F;          /* Red — alert/CTA accent */
  --nae-paper: #FFFFFF;        /* Background 1 */
  --nae-bone: #F8F7F6;         /* Background 2 — neutral white */
  --nae-line: #1B1620;         /* hairlines */
  --nae-line-soft: #D9D5D0;    /* subdivision rules */
  --nae-mute: #8C8590;         /* secondary text */

  /* === Logo Palette (do not use in body) === */
  --logo-accent: #F27625;
  --logo-main: #4CA8AA;
  --logo-letters: #25475D;

  /* === Type === */
  --font-display: "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  --font-body: "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-jp-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "ui-monospace", "Menlo", monospace;

  /* === Spatial === */
  --grid: 8px;
  --gutter: 24px;
  --rule: 1px;

  /* === Motion === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 480ms;
  --dur-slow: 900ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  color: var(--nae-ink);
  background: var(--nae-paper);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

/* === Custom cursor (rich motion) === */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, [data-cursor] { cursor: none; }
}

::selection { background: var(--nae-blue); color: #fff; }