/*
 * Marine Bigdata — design tokens.
 * 開発方針サマリー §3-7 と _reference-next の Ocean パレットを統合した正典。
 */

:root {
  /* Ocean palette */
  --color-navy-deep: #042c53;
  --color-navy: #0c447c;
  --color-abyss: #03101e;
  --color-deep: #061a30;
  --color-mid: #0a3b66;
  --color-swell: #0f5fa3;
  --color-surface: #1b8ad6;
  --color-foam: #9ddff0;
  --color-pearl: #f1f6fb;
  --color-sand: #ecead8;

  /* Accent palette */
  --color-teal: #0f6e56;
  --color-cyan-glow: #5dcaa5;
  --color-bio: #ffd56b;
  --color-coral: #ff7a5a;
  --color-algae: #6dd6a7;
  --color-plankton: #c4a4ff;

  /* 正本 styles/base.css の正式トークン名エイリアス。
     mbd_vantage_css_var() の返り値と、本番 DB に保存済みの ACF 値
     （'var(--plankton)' 等の裸名）がこれらを参照するため削除禁止。 */
  --plankton: var(--color-plankton);
  --coral: var(--color-coral);
  --surface: var(--color-surface);

  /* Surface tokens (semantic) */
  --bg-page: #f6f8fb;
  --bg-soft: #eef3f8;
  --bg-card: #ffffff;
  --bg-band: var(--color-navy);
  /* 正本 styles/base.css のヒーロー背景は --abyss。header.php の
     <meta name="theme-color"> と同期を保つこと（meta では var() 不可）。 */
  --bg-hero: var(--color-abyss);
  --ink: #0a1a2e;
  --ink-muted: rgba(10, 26, 46, 0.62);
  --ink-on-dark: #dbe7f1;
  --ink-on-dark-muted: rgba(219, 231, 241, 0.62);
  --line: rgba(10, 26, 46, 0.1);
  --line-on-dark: rgba(241, 246, 251, 0.18);

  /* Typography */
  --font-display-jp: "Shippori Mincho B1", "Noto Serif JP", serif;
  --font-display-en: "Cormorant Garamond", "Shippori Mincho B1", serif;
  --font-body-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body-en: "Inter Tight", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale */
  --fs-eyebrow: 11px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-h1: clamp(40px, 6vw, 76px);
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-h3: 24px;
  --fs-h4: 18px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Containers */
  --container-max: 1280px;
  --container-padding: clamp(20px, 4vw, 56px);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-soft: 0 18px 40px -16px rgba(3, 16, 30, 0.35);
  --shadow-deep: 0 30px 80px -20px rgba(3, 16, 30, 0.55), 0 8px 24px -10px rgba(3, 16, 30, 0.4);
  /* カード静止状態用の弱い影。正本の soft/deep はどちらも hover 向けに強いため、
   * 散在していた rgba 直書きをこの 1 トークンに集約する（乱造禁止）。 */
  --shadow-card: 0 6px 18px -10px rgba(3, 16, 30, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* モバイル drawer 専用 easing（正本: styles/responsive.css）。--ease-out と混同しない。 */
  --ease-drawer: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-1: 160ms;
  --duration-2: 280ms;
  --duration-3: 450ms;
}

/* デスクトップでは左右 padding 56px を保証する（clamp の 4vw は 1400px 未満で 56px に届かない） */
@media (min-width: 1024px) {
  :root {
    --container-padding: 56px;
  }
}