/* ============================================================
   BBB — Design Tokens (Navy × Cyan Pop)
   ネイビー地 × 水色シアンアクセント、見出し Poppins / 本文 Lora
   ============================================================ */

:root {
  /* --- Color: Brand base ------------------------------------ */
  --color-dark: #0b1a2e;       /* 主テキスト・ダーク面（深紺） */
  --color-light: #f0f8ff;      /* 主背景・ライト面（アリスブルー） */
  --color-mid-gray: #8aaccc;   /* 二次要素・境界 */
  --color-light-gray: #dff0fc; /* 控えめな背景 */

  /* --- Color: Accents --------------------------------------- */
  --color-cyan: #00d0ff;       /* 主アクセント（ポップシアン） */
  --color-blue: #4fa8f5;       /* 二次アクセント */
  --color-violet: #9b7fff;     /* 三次アクセント */

  --color-cyan-deep: #00a8d6;
  --color-text-muted: #4a6e90; /* ライト面の本文ミュート */
  --color-text-faint: #88afc8;

  /* --- Semantic --------------------------------------------- */
  --surface-base: var(--color-light);
  --surface-alt: var(--color-light-gray);
  --surface-card: #ffffff;
  --surface-dark: var(--color-dark);

  --text-strong: var(--color-dark);
  --text-body: #172f4a;
  --text-muted: var(--color-text-muted);
  --text-on-dark: var(--color-light);
  --text-on-dark-muted: #7fb3d4;

  --accent: var(--color-cyan);
  --accent-2: var(--color-blue);
  --accent-3: var(--color-violet);

  --border-hairline: rgba(11, 26, 46, 0.14);
  --border-soft: rgba(11, 26, 46, 0.08);
  --border-on-dark: rgba(0, 208, 255, 0.2);

  /* --- Gradients / Atmosphere ------------------------------- */
  --grad-base: radial-gradient(
    120% 120% at 50% 0%,
    #f8fbff 0%,
    var(--color-light) 55%,
    #e4f3ff 100%
  );

  /* --- Typography ------------------------------------------- */
  --font-heading: "Poppins", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Arial, sans-serif;
  --font-body: "Lora", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho",
    Georgia, serif;
  --font-jp-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --text-display: clamp(2.6rem, 1.2rem + 6vw, 5.5rem);
  --text-brand: clamp(4rem, 2rem + 11vw, 11rem);

  --leading-tight: 1.15;
  --leading-snug: 1.45;
  --leading-normal: 1.8;

  --tracking-brand: 0.04em;
  --tracking-label: 0.26em;

  /* --- Spacing ---------------------------------------------- */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --container: 1180px;
  --container-narrow: 820px;

  /* --- Radius / Shadow -------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 22px 50px -28px rgba(11, 26, 46, 0.2);
  --shadow-accent: 0 14px 34px -16px rgba(0, 208, 255, 0.55);

  /* --- Motion ----------------------------------------------- */
  --duration-fast: 180ms;
  --duration-normal: 360ms;
  --duration-slow: 720ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}