/**
 * tokens.css — Pattern C (asuzac DNA)
 * asuzac の多色パレットを青軸に整理
 * BtoB として色数を 4-5 トーンに絞る
 */

:root {
  /* ================================================================
     Color Palette — asuzac DNA 青軸転調
     Main: #2860AC（asuzac確定値）
     Deep Navy: #104058（同）
     Accent Cyan: #00A0E8（同）
     Accent Orange: #F86800（限定）
     Accent Yellow: #F8D000（極小限）
     Accent Green: #58C830（極小限）
  ================================================================ */

  /* Primary */
  --cl-main:        #2860AC;   /* ヒーロー大見出し・メインCTA */
  --cl-main-light:  #3A74C4;   /* ホバー状態 */
  --cl-ink:         #104058;   /* 線画・見出し・英字ラベル */
  --cl-cyan:        #00A0E8;   /* 導線・強調 */

  /* Accent — 限定使用 */
  --cl-orange:      #F86800;   /* CTA バッジ・太陽モチーフのみ */
  --cl-yellow:      #F8D000;   /* 星・ハイライトのみ（面では使わない） */
  --cl-green:       #58C830;   /* チェックアイコン・葉モチーフのみ */

  /* Background */
  --cl-sky:         #E0F0F0;   /* 背景主要色 */
  --cl-sky-2:       #D4ECF0;   /* ヒーロー空グラデ */
  --cl-sky-bright:  #A0E0F8;   /* 朝空ハイライト */
  --cl-night:       #3854A0;   /* フッター夜景 */
  --cl-night-deep:  #1E2E6E;   /* フッター最深部 */
  --cl-pale:        #F4F8FB;   /* セクション背景（白寄り）*/
  --cl-white:       #FFFFFF;

  /* Text */
  --cl-text:        #16384E;   /* 本文 */
  --cl-text-sub:    #3A5464;   /* 補足テキスト */
  --cl-text-muted:  #6B8494;   /* placeholder・注釈 */

  /* Border / Divider */
  --cl-border:      #C8DDE8;
  --cl-border-light:#E0ECF2;

  /* ================================================================
     Typography
  ================================================================ */
  --font-sans: 'IBM Plex Sans JP', system-ui, sans-serif;

  --fz-hero:   clamp(36px, 6vw, 72px);
  --fz-h2:     clamp(30px, 4.2vw, 56px);
  --fz-h3:     clamp(20px, 2.2vw, 28px);
  --fz-lead:   clamp(16px, 1.5vw, 22px);
  --fz-body:   clamp(14px, 1.2vw, 18px);
  --fz-sm:     clamp(12px, 1vw, 14px);
  --fz-label:  clamp(11px, 0.9vw, 13px);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-tight:  1.1;
  --lh-heading: 1.25;
  --lh-body:   1.8;
  --lh-lead:   1.7;

  --ls-wide:   0.16em;
  --ls-wider:  0.22em;

  /* ================================================================
     Layout
  ================================================================ */
  --container:   1280px;
  --content-col: 1080px;
  --gutter:      clamp(20px, 4vw, 48px);
  --section-pad: clamp(64px, 10vw, 128px);

  /* ================================================================
     Components
  ================================================================ */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-card: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 30px rgba(16, 64, 88, 0.08);
  --shadow-card: 0 4px 20px rgba(16, 64, 88, 0.06);
  --shadow-badge:0 8px 24px rgba(248, 104, 0, 0.3);

  /* ================================================================
     Animation
  ================================================================ */
  --transition-base: 0.28s ease;
  --transition-fast: 0.18s ease;

  /* Parallax props (動的に JS が上書き) */
  --parallax-back:  0px;
  --parallax-front: 0px;
}

/* ================================================================
   Breakpoints (コメント参照用)
   @media (max-width: 767px)   — SP
   @media (min-width: 768px)   — Tablet +
   @media (min-width: 1024px)  — PC -
   @media (min-width: 1280px)  — PC wide
================================================================ */