/* ============================================================
   SOROE LP デザインシステム(STEP2)
   - カラー/タイポ/余白/角丸/影/ボタン状態/モーション時間/ブレークポイントを定義。
   - カラー値は src/core.js の DESIGN_CSS と完全一致(LPとアプリの視覚統一)。
   - このファイルは landing/ 配下の全ページ(index / terms / privacy / security / _fv-*)から共有参照する。
   ============================================================ */

:root{
  /* ---- カラー(アプリと同一値) ---- */
  --bg:#F5F7F9; --card:#FFFFFF; --line:#E5E6EB; --line2:#F0F1F5;
  --ink:#1F2D3D; --muted:#5B6472; --faint:#8F959E;
  --primary:#1F8798; --primary-d:#16707F; --primary-bg:#E8F3F5;
  --sidebar-bg:#1C2733; --sidebar-ink:#FFFFFF; --sidebar-muted:#94A2AF; --sidebar-active:#28384A;
  --c-crm:#C1622E; --c-sales:#4A6FA5; --c-purchase:#4F8F63; --c-billing:#8A5A8C;
  --c-accounting:#3B6E91; --c-project:#9C8438; --c-flow:#6B7C93; --c-analytics:#57608A; --c-ai:#256E8F;
  --ok:#2F9E44; --warn:#E8590C; --bad:#E03131;
  --ok-bg:#E7F6EA; --warn-bg:#FCEBE0; --bad-bg:#FBE3E3;
  --shadow:0 1px 2px rgba(31,45,61,.05), 0 4px 14px rgba(31,45,61,.04);
  --shadow-lift:0 4px 10px rgba(31,45,61,.06), 0 14px 32px rgba(31,45,61,.08);

  /* ---- モジュールカラーの半透明背景派生トークン(HTML直書きの反復ハードコード色を集約。Codexレビュー中8) ---- */
  --c-crm-bg:rgba(193,98,46,.12);
  --c-sales-bg:rgba(74,111,165,.12);
  --c-purchase-bg:rgba(79,143,99,.12);
  --c-billing-bg:rgba(138,90,140,.12);
  --c-accounting-bg:rgba(59,110,145,.12);
  --c-project-bg:rgba(156,132,56,.12);
  --c-flow-bg:rgba(107,124,147,.12);
  --c-analytics-bg:rgba(87,96,138,.12);
  --c-ai-bg:rgba(37,110,143,.12);

  /* ---- 本文・キャプション用コントラスト確保トークン(Codexレビュー高3・高4)
         --faint / --warn / --bad は装飾(アイコン・区切り線・非テキストUI)専用のまま残し、
         本文サイズの文字色にはこちらの *-text トークン(いずれも背景に対し4.5:1以上)を使う。 ---- */
  --faint-text:#68707E;
  --warn-text:#B34700;
  --bad-text:#B42318;

  /* ---- デザインシステム追加トークン(brief §4) ---- */
  --surface:#FFFFFF;                 /* Surface */
  --surface-elevated:#FFFFFF;        /* Elevated Surface(影で区別。色は同一) */
  --text-primary:var(--ink);
  --text-secondary:var(--muted);
  --text-muted:var(--faint-text);
  --border:var(--line);
  --primary-hover:var(--primary-d);
  --primary-pressed:#125863;
  --accent:var(--c-ai);              /* Accent(識別用。多用しない) */
  --on-primary:#FFFFFF;

  /* ---- 角丸 ---- */
  --radius-sm:8px;      /* 小型UI */
  --radius-md:12px;     /* 標準カード */
  --radius-lg:16px;     /* 大型パネル */
  --radius-cta:10px;    /* CTA */

  /* ---- 余白(8px基準) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-30:120px;

  /* ---- タイポグラフィ(clamp・px⇄remは16px基準) ---- */
  --fs-display:clamp(2.5rem, 1.55rem + 2.4vw, 4rem);      /* 48-64px */
  --fs-h1:clamp(2.5rem, 1.85rem + 1.7vw, 3.5rem);          /* 44-56px相当(実測やや調整) */
  --fs-h2:clamp(1.75rem, 1.45rem + 1vw, 2.625rem);         /* 32-42px */
  --fs-h3:clamp(1.375rem, 1.25rem + .4vw, 1.75rem);        /* 22-28px */
  --fs-bodyl:1.125rem;   /* 18px */
  --fs-body:1rem;        /* 16px */
  --fs-caption:clamp(.8125rem, .8rem + .1vw, .875rem); /* 13-14px */

  /* ---- モーション ---- */
  --dur-hover:160ms; --dur-state:200ms; --dur-panel:280ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);

  /* ---- グリッド ---- */
  --container-max:1240px;

  /* ---- ダークテーマの実値を一箇所に集約(Codexレビュー低27)
         data-theme="dark" 明示指定時と、OS設定追従(prefers-color-scheme)時の
         2箇所でトークンを割り当てる必要はあるが、値そのものはここでしか定義しない。 ---- */
  --dark-bg:#15171E; --dark-card:#1D2029; --dark-line:#2B2F3A; --dark-line2:#252833;
  --dark-ink:#EDEFF3; --dark-muted:#A6ACBC; --dark-faint:#7A8094;
  --dark-faint-text:#8F95A6; --dark-warn-text:#FFA366; --dark-bad-text:#FF9E96;
  --dark-primary:#3FA6B5; --dark-primary-d:#1F8798; --dark-primary-bg:#1D3A3E;
  --dark-sidebar-bg:#141C24; --dark-sidebar-ink:#F2F3F7; --dark-sidebar-muted:#8B93A0; --dark-sidebar-active:#22303D;
  --dark-ok-bg:#173622; --dark-warn-bg:#3A2717; --dark-bad-bg:#3A1E1E;
  --dark-shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.24);
  --dark-shadow-lift:0 6px 16px rgba(0,0,0,.32), 0 18px 40px rgba(0,0,0,.30);
  --dark-surface:#1D2029; --dark-surface-elevated:#232733;
  --dark-primary-pressed:#0F4750;
}

:root[data-theme="dark"]{
  --bg:var(--dark-bg); --card:var(--dark-card); --line:var(--dark-line); --line2:var(--dark-line2);
  --ink:var(--dark-ink); --muted:var(--dark-muted); --faint:var(--dark-faint);
  --faint-text:var(--dark-faint-text); --warn-text:var(--dark-warn-text); --bad-text:var(--dark-bad-text);
  --primary:var(--dark-primary); --primary-d:var(--dark-primary-d); --primary-bg:var(--dark-primary-bg);
  --sidebar-bg:var(--dark-sidebar-bg); --sidebar-ink:var(--dark-sidebar-ink); --sidebar-muted:var(--dark-sidebar-muted); --sidebar-active:var(--dark-sidebar-active);
  --ok-bg:var(--dark-ok-bg); --warn-bg:var(--dark-warn-bg); --bad-bg:var(--dark-bad-bg);
  --shadow:var(--dark-shadow); --shadow-lift:var(--dark-shadow-lift);
  --surface:var(--dark-surface); --surface-elevated:var(--dark-surface-elevated);
  --primary-pressed:var(--dark-primary-pressed);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--dark-bg); --card:var(--dark-card); --line:var(--dark-line); --line2:var(--dark-line2);
    --ink:var(--dark-ink); --muted:var(--dark-muted); --faint:var(--dark-faint);
    --faint-text:var(--dark-faint-text); --warn-text:var(--dark-warn-text); --bad-text:var(--dark-bad-text);
    --primary:var(--dark-primary); --primary-d:var(--dark-primary-d); --primary-bg:var(--dark-primary-bg);
    --sidebar-bg:var(--dark-sidebar-bg); --sidebar-ink:var(--dark-sidebar-ink); --sidebar-muted:var(--dark-sidebar-muted); --sidebar-active:var(--dark-sidebar-active);
    --ok-bg:var(--dark-ok-bg); --warn-bg:var(--dark-warn-bg); --bad-bg:var(--dark-bad-bg);
    --shadow:var(--dark-shadow); --shadow-lift:var(--dark-shadow-lift);
    --surface:var(--dark-surface); --surface-elevated:var(--dark-surface-elevated);
    --primary-pressed:var(--dark-primary-pressed);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:700; letter-spacing:.01em;}
img,svg{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}

.container{max-width:var(--container-max); margin:0 auto; padding:0 24px;}
.eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--primary-d); background:var(--primary-bg); padding:5px 12px; border-radius:999px; letter-spacing:.04em;}
.eyebrow.on-dark{background:rgba(255,255,255,.1); color:#CFE9EC;}
.section-title{font-size:var(--fs-h2); margin-top:14px; line-height:1.4; font-weight:800;}
.section-lead{color:var(--muted); font-size:var(--fs-bodyl); margin-top:14px; max-width:640px; line-height:1.85;}
.section-head{margin-bottom:var(--sp-12);}
.section-head.center{text-align:center;}
.section-head.center .section-lead{margin-left:auto; margin-right:auto;}
section{padding:var(--sp-20) 0;}
section.bg-surface{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
section.bg-navy{background:var(--sidebar-bg); color:#fff;}
section.bg-navy .section-title, section.bg-navy h2, section.bg-navy h3{color:#fff;}
section.bg-navy .section-lead{color:var(--sidebar-muted);}
section.dense{padding:var(--sp-16) 0;}
.badge-dot{width:9px; height:9px; border-radius:999px; flex:0 0 auto;}

/* ---- ボタン(5状態: default/hover/pressed/focus/disabled) ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:var(--radius-cta); font-weight:700; font-size:14.5px; border:1px solid transparent; cursor:pointer; white-space:nowrap; min-height:44px; transition:background var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard), transform var(--dur-hover) var(--ease-standard), box-shadow var(--dur-hover) var(--ease-standard);}
.btn-primary{background:var(--primary); color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-hover); text-decoration:none;}
.btn-primary:active{background:var(--primary-pressed); transform:translateY(1px);}
.btn-primary:disabled{background:var(--faint); cursor:not-allowed; opacity:.7;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--line2); text-decoration:none;}
.btn-ghost:active{background:var(--line); transform:translateY(1px);}
.btn-on-navy{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-on-navy:hover{background:rgba(255,255,255,.1);}
.btn-lg{padding:15px 30px; font-size:15.5px;}
.btn-block{width:100%;}

/* ---- グリッド/ブレークポイント基準 ---- */
@media (max-width:1024px){ .container{padding:0 20px;} }

/* ---- スキップリンク(Codexレビュー高1。4ページ共通) ---- */
.skip-link{position:absolute; left:12px; top:-48px; z-index:100; background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700; transition:top var(--dur-state) var(--ease-standard);}
.skip-link:focus{top:12px; text-decoration:none;}