/* =====================================================================
   チョクウケ Design System — colors_and_type.css
   株式会社Polyzm / 小規模工事業者向けWEBサイトサービス「チョクウケ」
   全制作物の土台。:root のトークンを参照して使う。
   --------------------------------------------------------------------
   フォントについて:
   見出し・本文ともに、提供されたブランドフォント **LINE Seed JP** を
   fonts/ から自己ホストで使用します（Thin/Regular/Bold/ExtraBold）。
     - 見出し  : LINE Seed JP ExtraBold(800) / Bold(700)
     - 本文    : LINE Seed JP Regular(400) / Bold(700)
     - 英数字  : Archivo（CDN・数値アクセント用 / 等幅数字）※未提供のためCDN継続
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap');

/* ---------- BRAND FONT: LINE Seed JP (self-hosted) ---------- */
@font-face {
  font-family: 'LINE Seed JP'; font-style: normal; font-weight: 100;
  src: url('fonts/LINESeedJP-Thin.ttf') format('truetype'); font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP'; font-style: normal; font-weight: 400;
  src: url('fonts/LINESeedJP-Regular.ttf') format('truetype'); font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP'; font-style: normal; font-weight: 700;
  src: url('fonts/LINESeedJP-Bold.ttf') format('truetype'); font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP'; font-style: normal; font-weight: 800;
  src: url('fonts/LINESeedJP-ExtraBold.ttf') format('truetype'); font-display: swap;
}
/* 900 を要求された場合も ExtraBold で受ける（合成太字を避ける） */
@font-face {
  font-family: 'LINE Seed JP'; font-style: normal; font-weight: 900;
  src: url('fonts/LINESeedJP-ExtraBold.ttf') format('truetype'); font-display: swap;
}

:root {
  /* ---------- BRAND ---------- */
  --brand-navy:   #0A2A3A;  /* ロゴ「チョク」: 主色・信頼・堅牢 */
  --brand-orange: #F7951D;  /* ロゴ「ウケ」: アクセント・行動・現場 */

  /* ---------- NAVY SCALE ---------- */
  --navy-50:  #EAF0F3;
  --navy-100: #CDD9E0;
  --navy-200: #9FB4BF;
  --navy-300: #6E8A99;
  --navy-400: #436273;
  --navy-500: #21495C;
  --navy-600: #143A4E;   /* primary hover */
  --navy-700: #0F3243;
  --navy-800: #0A2A3A;   /* = brand */
  --navy-900: #06202D;   /* primary pressed */

  /* ---------- ORANGE SCALE ---------- */
  --orange-50:  #FEF4E6;
  --orange-100: #FDE3BF;
  --orange-200: #FBCB85;
  --orange-300: #F9B24D;
  --orange-400: #F8A22E;
  --orange-500: #F7951D;  /* = brand */
  --orange-600: #E07E0A;  /* accent hover */
  --orange-700: #B86407;  /* accent pressed */

  /* ---------- NEUTRALS (やや寒色 / ネイビーと調和) ---------- */
  --white:    #FFFFFF;
  --gray-50:  #F6F8F9;
  --gray-100: #EDF1F3;
  --gray-200: #DCE3E7;
  --gray-300: #C2CDD3;
  --gray-400: #9AA8B0;
  --gray-500: #6E7F88;
  --gray-600: #51626B;
  --gray-700: #3A4951;
  --gray-800: #25313A;
  --gray-900: #0A2A3A;

  /* ---------- SEMANTIC ---------- */
  --success: #1F9D55;  --success-bg: #E7F6EE;
  --warning: #E08A00;  --warning-bg: #FDF1DD;
  --danger:  #D64545;  --danger-bg:  #FBEAEA;
  --info:    #2D7DD2;  --info-bg:    #E7F1FB;

  /* ---------- SURFACES / BACKGROUNDS ---------- */
  --bg:          var(--white);
  --bg-subtle:   #F6F8F9;
  --bg-section:  #EEF3F5;   /* ネイビー寄りの淡いセクション背景 */
  --bg-navy:     var(--navy-800);  /* ダークセクション */
  --bg-orange:   var(--orange-500);

  /* ---------- FOREGROUND (text) ---------- */
  --fg-1: #0A2A3A;                       /* 主テキスト = ネイビー */
  --fg-2: #51626B;                       /* 副テキスト */
  --fg-3: #6E7F88;                       /* 補足・キャプション */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.72);
  --fg-on-orange: #FFFFFF;

  /* ---------- BORDERS ---------- */
  --border:        #DCE3E7;
  --border-strong: #C2CDD3;
  --border-navy:   var(--navy-800);
  --focus-ring:    #2D7DD2;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SHADOWS (控えめ・実直) ---------- */
  --shadow-sm: 0 1px 2px rgba(10,42,58,0.08);
  --shadow-md: 0 4px 12px rgba(10,42,58,0.10);
  --shadow-lg: 0 12px 32px rgba(10,42,58,0.14);
  --shadow-orange: 0 6px 18px rgba(247,149,29,0.35);

  /* ---------- SPACING (4pxベース) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- FONT FAMILIES ---------- */
  --font-display: "LINE Seed JP", system-ui, sans-serif;
  --font-body:    "LINE Seed JP", system-ui, sans-serif;
  --font-num:     "Archivo", "LINE Seed JP", system-ui, sans-serif;

  /* ---------- FONT WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --fs-display: clamp(2.6rem, 5.5vw, 4rem);   /* ヒーロー大見出し */
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.1rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lead: 1.1875rem;   /* リード文 */
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-normal: 1.7;       /* 本文は広め＝読みやすさ重視 */

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;  /* ラベル・英字小見出し */
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY CLASSES — そのまま使える型
   ===================================================================== */
.ck-display {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--fg-1);
}
.ck-h1 { font-family: var(--font-display); font-weight: var(--w-black);
  font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-1); }
.ck-h2 { font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); }
.ck-h3 { font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.ck-h4 { font-family: var(--font-body); font-weight: var(--w-bold);
  font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-1); }
.ck-lead { font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg-2); }
.ck-body { font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); }
.ck-sm { font-family: var(--font-body); font-size: var(--fs-sm);
  line-height: var(--lh-snug); color: var(--fg-2); }
.ck-caption { font-family: var(--font-body); font-size: var(--fs-xs);
  line-height: var(--lh-snug); color: var(--fg-3); }
/* 英字ラベル / オーバーライン（大文字＋字間広め） */
.ck-overline { font-family: var(--font-num); font-weight: var(--w-bold);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--brand-orange); }
/* 数字（実績・電話番号など） */
.ck-num { font-family: var(--font-num); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }