/* ============================================================
   海外投資協会 — Design tokens
   Navy = authority & trust. Gold = premium / wealth.
   Teal = growth / balance. 明朝(serif) for display, ゴシック(sans) for body.
   ============================================================ */
:root {
  /* ---- Brand: Navy (primary) ---- */
  --navy-900: #0e2236;
  --navy-800: #14314d;
  --navy-700: #1b3b5f;
  --navy-600: #244e7a;
  --navy-500: #2f6098;
  --navy-400: #4b7bae;
  --navy-300: #8fb0cd;
  --navy-200: #c3d6e6;
  --navy-100: #e3edf5;
  --navy-050: #f1f6fb;

  /* ---- Brand: Gold (accent / premium) ---- */
  --gold-700: #a07c2e;
  --gold-600: #bf9a4a;
  --gold-500: #c4a052;
  --gold-400: #d4b878;
  --gold-300: #e4d0a3;
  --gold-200: #f0e4c8;
  --gold-100: #faf5e9;
  --gold-050: #fdfaf2;
  --gold-sheen: linear-gradient(150deg, #e7cf8f 0%, #c9a256 38%, #b8893b 62%, #e3c886 100%);

  /* ---- Brand: Teal (growth / secondary) ---- */
  --teal-700: #2f6f64;
  --teal-600: #3d8678;
  --teal-500: #4a9b8e;
  --teal-300: #9bc9c0;
  --teal-100: #e7f2ef;
  --teal-050: #f2f8f6;

  /* ---- LINE brand (CTA) ---- */
  --line-green: #06c755;
  --line-green-dark: #05a648;

  /* ---- Neutrals / ink ---- */
  --ink-900: #15212e;
  --ink-700: #34465a;
  --ink-500: #5e7188;
  --ink-300: #9aa9ba;
  --line-200: #dde5ee;
  --line-100: #eaf0f6;
  --white: #ffffff;

  /* ---- Surfaces ---- */
  --surface-page: #ffffff;
  --surface-cool: #f4f7fa;
  --surface-card: #ffffff;

  /* ---- Semantic ---- */
  --color-primary: var(--navy-700);
  --color-accent: var(--gold-500);
  --color-secondary: var(--teal-500);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-navy: #eaf2fa;
  --text-on-navy-muted: #a9c2d8;
  --border-default: var(--line-200);
  --border-strong: var(--navy-200);
  --danger: #c0473e;

  /* ---- Legacy article aliases (so existing article HTML keeps working) ---- */
  --navy: var(--navy-700);
  --gold: var(--gold-600);
  --gold2: var(--gold-500);
  --green: var(--teal-600);
  --red: var(--danger);
  --blue: var(--navy-600);
  --purple: var(--navy-500);   /* off-brand purple → brand navy (new design cohesion) */
  --orange: var(--gold-600);   /* off-brand orange → brand gold */
  --text: var(--ink-900);
  --gray1: var(--surface-cool);
  --gray2: var(--line-200);
  --gray3: var(--ink-500);

  /* ---- Type ---- */
  --font-serif: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --fs-h1: 34px;
  --fs-h3: 21px;
  --fs-body: 15.5px;
  --fs-stat: 46px;
  --ls-heading: 0.02em;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 10px;            /* legacy article radius */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(20, 49, 77, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 49, 77, 0.07);
  --shadow-md: 0 6px 20px rgba(20, 49, 77, 0.09);
  --shadow-lg: 0 16px 40px rgba(20, 49, 77, 0.12);
  --shadow: var(--shadow-sm); /* legacy article shadow */
  --shadow-gold: 0 6px 18px rgba(168, 130, 52, 0.28);
  --ring: 0 0 0 3px rgba(47, 96, 152, 0.30);

  /* ---- Layout ---- */
  --container-max: 1260px;
  --container-wide: 1260px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
}