/*
 * base.css — Avrencal 公式サイトのデザイントークン（設計図×スピード）
 * .claude_for_web_design/tokens/base.css をもとに、dark-only で定義。
 */
:root {
  color-scheme: dark;

  /* プリミティブ */
  --navy-950: #070b18;
  --navy-900: #0b1124;
  --navy-850: #10182f;
  --navy-800: #16203d;
  --navy-700: #222d50;
  --line:     #24305a;   /* 設計図のグリッド線 */
  --slate-500:#7c87ab;
  --slate-300:#b7c0dc;
  --slate-200:#d3d9ec;
  --white:    #f3f5fc;
  --indigo-400:#8b8cff;
  --indigo-500:#6d6ff7;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --lime-300: #bef264;

  /* セマンティック */
  --color-bg:            var(--navy-950);
  --color-surface:       var(--navy-900);
  --color-surface-2:     var(--navy-850);
  --color-surface-3:     var(--navy-800);
  --color-border:        var(--line);
  --color-border-strong: var(--slate-500);
  --color-text:          var(--white);
  --color-text-muted:    var(--slate-200);
  --color-text-subtle:   var(--slate-300);
  --color-primary:       var(--cyan-400);      /* 主CTA・リンク */
  --color-primary-hover: var(--cyan-300);
  --color-primary-contrast: var(--navy-950);
  --color-accent:        var(--indigo-400);
  --color-success:       var(--lime-300);
  --color-danger:        #ff7a8a;
  --color-focus-ring:    var(--cyan-300);
  --grad-line: linear-gradient(90deg, var(--indigo-500), var(--cyan-400));   /* 線と細い強調だけに使う（面には使わない：ADR-0012） */

  /* 文字 */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-heading: "Zen Kaku Gothic New", var(--font-sans);
  --font-latin: "Space Grotesk", var(--font-sans);
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem;
  --text-xl: 1.5625rem; --text-2xl: 1.9375rem; --text-3xl: 2.4375rem;
  --leading-tight: 1.3; --leading-body: 1.85; --tracking-body: 0.03em; --measure: 36em;

  /* 余白 */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;
  --section-lg: clamp(var(--space-16), 10vw, var(--space-32));
  --section-md: clamp(var(--space-12), 7vw, var(--space-24));
  --gutter: clamp(var(--space-4), 4vw, var(--space-8));
  --container: 1200px;
  --col-gap: var(--space-8);

  /* 形・動き */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-panel: 0 1px 0 rgb(255 255 255 / .04) inset, 0 20px 50px -20px rgb(0 0 0 / .6);
  --duration-fast: 160ms; --duration-base: 320ms; --duration-slow: 700ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --tap-min: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body);
  letter-spacing: var(--tracking-body); text-wrap: pretty; text-autospace: normal;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: var(--leading-tight); letter-spacing: .02em; font-feature-settings: "palt"; text-spacing-trim: trim-start; text-wrap: balance; }
img, svg { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.phrase { display: inline-block; }
.nowrap { white-space: nowrap; }
p, li, dd { line-break: strict; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-primary-contrast); }
.skip-link:focus { top: var(--space-4); }

/* 動きを減らす設定では、アニメーションを止めて最終状態を見せる（ADR-0007, 0009） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}