@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Poppins:wght@400;500;600&family=Quando&display=swap');

:root {
  /* Legacy variable names retained only as runtime compatibility aliases.
     Values follow the current Onebeat palette; historical prototype values live in DS evidence, not runtime. */
  --color-navy: #1a314b;
  --color-navy-dark: #0d1926;
  --color-pink: #fd604a;
  --color-pink-dark: #ff5212;
  --color-pink-light: #fff0eb;
  --color-blue: #1f6c6d;
  --color-blue-light: #ecf0f4;
  --color-green: #1f6c6d;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6f8;
  --color-text: #494a4a;
  --color-text-sub: #626263;
  --color-border: #ccdaee;
  --shadow-card: 0 8px 24px rgba(13, 25, 38, 0.08);
  --radius: 8px;
  --max-width: 1180px;

  /* Onebeat global visual language — semantic roles for approved redesigns. */
  --ob-color-heading: #1a314b;
  --ob-color-dark: #0d1926;
  --ob-color-action: #1f6c6d;
  --ob-color-action-hover: #195657;
  --ob-color-accent: #fd604a;
  --ob-color-highlight: #e7bfe7;
  --ob-color-body: #494a4a;
  --ob-color-muted: #626263;
  --ob-color-surface-cool: #ecf0f4;
  --ob-color-surface-neutral: #f4f6f8;
  --ob-color-card: #f4f7f9;
  --ob-color-card-border: #ccdaee;
  --ob-gradient-hero: linear-gradient(#ffffff 0%, #ecf0f4 100%);
  --ob-gradient-navy: linear-gradient(204.43deg, #101e2f 43.91%, #354e6a 97.43%);
  --ob-gradient-plum: linear-gradient(202.3deg, #e7bfe7 8.44%, #d394d3 99.29%);
  --ob-gradient-teal: linear-gradient(190.05deg, #206c6d 21.26%, #2d8c8e 94.64%);
  --ob-home-primary-expressive: #fd604a;
  --ob-home-primary-gradient: linear-gradient(161.15deg, #ff9974 8.73%, #ff5212 88.52%);
  --ob-home-primary-ink: #0d1926;
  --ob-home-secondary-functional: #1f6c6d;
  --ob-home-highlight: #e7bfe7;
  --ob-font-latin: "Poppins", Arial, sans-serif;
  --ob-font-editorial: "Quando", Georgia, serif;
  --ob-layout-max: 1440px;

  /* Cross-page brand shell contract. Template-specific exceptions remain explicit. */
  --ob-shell-hero-pad-top: clamp(78px, 8vw, 112px);
  --ob-shell-hero-pad-bottom: clamp(72px, 7vw, 102px);
  --ob-shell-hero-title: clamp(40px, 4.6vw, 62px);
  --ob-shell-hero-lead: 17px;
  --ob-shell-label: 12px;
  --ob-shell-hero-marker-width: 32px;
  --ob-shell-section-marker-width: 28px;
  --ob-shell-marker-height: 3px;
  --ob-shell-section-title: clamp(28px, 3vw, 40px);
  --ob-shell-control-radius: 8px;
  --ob-shell-panel-radius: 20px;
  --ob-shell-media-radius: 18px;
  --ob-shell-media-inner-radius: 10px;
  --ob-shell-media-shadow: 0 18px 44px rgba(13,25,38,.08);

  /* Shared type roles: use only where the information role is intentionally equivalent. */
  --ob-type-support-page-title: var(--ob-shell-hero-title);
  --ob-type-support-section-title: var(--ob-shell-section-title);
  --ob-type-cta-title: clamp(28px, 3vw, 40px);
  --ob-type-cta-body: 16px;
  --ob-type-cta-label: 15px;
}

@media (max-width: 760px) {
  :root {
    --ob-shell-hero-pad-top: 54px;
    --ob-shell-hero-pad-bottom: 50px;
    --ob-shell-hero-title: clamp(34px, 9vw, 42px);
    --ob-shell-hero-lead: 16px;
    --ob-shell-section-title: 25px;
  }
}