/* ============================================================
   THE NEXT COMPANY — Design Tokens (light/editorial)
   Source: Design.md / skill.md (TYPEUI_SH_MANAGED block)
   ============================================================ */

:root {
  /* — Typography — */
  --font-family-primary: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --font-size-xs:   12.8px;
  --font-size-sm:   14px;
  --font-size-md:   14.4px;
  --font-size-base: 16px;
  --font-size-lg:   16px;
  --font-size-xl:   19.2px;
  --font-size-2xl:  20px;
  --font-size-3xl:  22.4px;
  --font-size-4xl:  24px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-base:    700;
  --font-weight-black:   900;

  --line-height-base: 27.2px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.8;

  /* — Color (semantic, per tokens) — */
  --color-text-primary:   #ffffff;   /* on dark surface */
  --color-text-tertiary:  #333333;   /* primary body text on light */
  --color-text-inverse:   #888888;   /* large/decorative only */
  --color-border-default: #060606;   /* near-black hairline */
  --color-surface-base:   #000000;
  --color-surface-muted:  #0553dd;   /* accent blue */
  --color-surface-strong: #f6f6f6;   /* page background */

  /* Synthesized within the system */
  --color-page:           #f6f6f6;            /* surface.strong used as page bg */
  --color-card:           #ffffff;
  --color-text-on-page:   #060606;            /* uses border.default value */
  --color-text-mute:      #555555;            /* between #333 and #888 — passes 4.5:1 on #f6f6f6 */
  --color-accent:         var(--color-surface-muted);
  --color-accent-hover:   #0747bd;
  --color-accent-active:  #053aa0;
  --color-accent-soft:    rgba(5, 83, 221, 0.08);
  --color-on-accent:      #ffffff;
  --color-hairline:       rgba(6, 6, 6, 0.12);
  --color-hairline-strong:rgba(6, 6, 6, 0.32);
  --color-focus-ring:     #0553dd;

  /* — Spacing — */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 30px;
  --space-8: 40px;

  /* — Radius — */
  --radius-xs: 1px;
  --radius-sm: 12px;
  --radius-md: 50px;
  --radius-lg: 128px;

  /* — Motion — */
  --motion-instant: 300ms;
  --motion-fast:    500ms;
  --motion-normal:  600ms;
  --motion-slow:    800ms;
  --motion-slower:  1000ms;
  --motion-step6:   2000ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Synthesized elevation */
  --shadow-sm: 0 1px 2px rgba(6, 6, 6, 0.04);
  --shadow-md: 0 8px 28px rgba(6, 6, 6, 0.06);
  --shadow-lg: 0 24px 60px rgba(6, 6, 6, 0.10);
}

/* — Base — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-text-on-page);
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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