/* ============================================================
   AsetZ marketing-site preview-B — tokens.css
   Layer 1 of 3: Design tokens (CSS custom properties)
   Source of truth: design-spec/03b_デザイン要件_案B.md (Seline Analytics)
   ------------------------------------------------------------
   案Bの核：
     - クリーム背景 canvas (#fafaf9)
     - ブルー1色だけ (Signal Blue #262EA1) がアクセント
       = CTA / icon stroke / chart bar / link / inline highlight
     - 残りは 96% グレースケールの暖かい stone
     - カード = 白 (#ffffff) + 1px Pearl border (#e5e7eb) + 10px 角丸
     - シャドウは dashboard preview と一部 stat card のみ
     - ピルボタン (9999px)
   見出しスケールは要件の 52px を上限に日本語可読性優先で調整。
   フォントは確実性優先で Inter（見出し・本文とも）+ 日本語 Noto Sans JP。
   ============================================================ */

:root {

  /* ---- Colors (palette / 要件のトークン名を移植) ----------- */
  --color-signal-blue:    #262EA1; /* THE one chromatic accent */
  --color-highlight-wash: #D3D5EC; /* Blue Highlight Run の背景（署名要素） */
  --color-canvas-cream:   #fafaf9; /* page background — warm off-white */
  --color-offwhite-2:     #f8fafa; /* 第2オフホワイト（ユーザー指定）。枠線なしでカード/セクションの色差を作る用 */
  --color-pure-white:     #ffffff; /* card surfaces, dashboard preview */
  --color-stone-ink:      #0c0a09; /* primary headings / body — warm near-black */
  --color-stone-charcoal: #1c1917; /* rare dark accent surface (.btn--dark) */
  --color-warm-slate:     #78716c; /* secondary body text, helper labels */
  --color-soft-slate:     #a8a29e; /* tertiary text, muted captions */
  --color-mist-gray:      #afafae; /* decorative icon fills, placeholder strokes */
  --color-pearl-border:   #e5e7eb; /* PRIMARY 1px hairline — dominant border */
  --color-warm-border:    #d6d3d1; /* input fields, slightly warmer hairline */
  --color-fog-border:     #e1dfdd; /* nav borders, lightest structural line */
  --color-heading-mute:   #c9c5c2; /* placeholder / disabled display text */

  /* A single derived hover tone for Signal Blue actions (no new hue) */
  --color-signal-blue-hover: #1B2275;

  /* ---- Semantic aliases (use these in components) ---------- */
  --bg-canvas:    var(--color-canvas-cream); /* page body */
  --bg-surface:   var(--color-pure-white);   /* cards / elevated panels */
  --bg-nest:      var(--color-pure-white);   /* nested surfaces, icon fills */
  --bg-dark:      var(--color-stone-charcoal); /* rare dark accent */

  --text-strong:  var(--color-stone-ink);    /* headings + strong body */
  --text-body-c:  var(--color-warm-slate);   /* working body gray */
  --text-muted:   var(--color-soft-slate);   /* tertiary / captions */
  --text-faint:   var(--color-mist-gray);    /* decorative / placeholder */

  --accent:       var(--color-signal-blue);  /* CTA fill, icon, chart, link */
  --accent-hover: var(--color-signal-blue-hover);
  --highlight:    var(--color-highlight-wash); /* inline emphasis wash */

  --link:         var(--color-signal-blue);
  --link-hover:   var(--color-signal-blue-hover);

  /* Borders — Pearl is the dominant hairline by frequency */
  --hairline:      var(--color-pearl-border); /* default 1px card border */
  --hairline-warm: var(--color-warm-border);  /* inputs */
  --hairline-fog:  var(--color-fog-border);   /* nav dividers */

  /* ---- Typography — families ------------------------------- */
  /* Roobert(display) -> Inter · Inter(body/UI) -> Inter · 日本語 -> Noto Sans JP */
  --font-display: "Inter", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui:      "Inter", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-jp:      "Noto Sans JP", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* 訴求見出し用の明朝（強く伝えたい大見出しだけに使う。詳細 design-spec/04_タイポグラフィルール.md） */
  --font-serif:   "Shippori Mincho", "Noto Sans JP", serif;

  /* Tracking — 要件のタイトな display tracking を踏襲（サイズで段階的に） */
  --tracking-hero:     -0.025em; /* 52px display = signature tight tracking */
  --tracking-display:  -0.021em; /* 32px headings */
  --tracking-subhead:  -0.017em; /* 20px subheading / lead */
  --tracking-body:      0.003em; /* 16px body — subtle positive tracking */
  --tracking-caption:   0.025em; /* 12px caption / micro-labels widen */

  /* Weights — 500 is the ONLY correct weight for action labels & tabs */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ---- Typography — scale (要件のType Scaleを踏襲) ---------- */
  --text-caption:     12px;  --leading-caption:    1.5;
  --text-body-sm:     14px;  --leading-body-sm:    1.5;
  --text-body:        16px;  --leading-body:       1.54;  /* JP本文は行間やや広め */
  --text-body-lg:     18px;  --leading-body-lg:    1.56;
  --text-subheading:  20px;  --leading-subheading: 1.5;

  /* Heading scale — 日本語向けに調整（要件 32 / 52 を踏襲） */
  --text-heading-sm:  24px;  --leading-heading-sm: 1.3;   /* h4 / small headings */
  --text-heading:     28px;  --leading-heading:    1.25;  /* h3 */
  --text-heading-md:  32px;  --leading-heading-md: 1.2;   /* h2 (要件 heading-sm) */
  --text-heading-lg:  40px;  --leading-heading-lg: 1.18;  /* large section title */
  --text-hero:        52px;  --leading-hero:       1.12;  /* Hero (要件 heading) */

  /* ---- Spacing (4px base / compact density) ---------------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-128: 128px;
  --space-160: 160px;

  /* ---- Layout ---------------------------------------------- */
  --page-max:        1200px;
  --section-pad-y:   112px;  /* desktop section rhythm (要件 96-128px の中央) */
  --section-pad-y-sm:72px;   /* mobile */
  --gutter:          24px;   /* horizontal page gutter */

  /* ---- Radii (要件: tags/buttons 9999, cards 10, inputs 4) - */
  --radius-input: 4px;   /* inputs + inline data elements ONLY */
  --radius-card:  10px;  /* cards / hero asset / feature blocks */
  --radius-icon:  10px;  /* icon tiles (data surface, not pill) */
  --radius-pill:  9999px;/* buttons / tags / nav items */

  /* ---- Shadows (要件: 1 recipe + 1 floating accent) -------- */
  /* Reserve elevation for the dashboard preview card and rare stat card. */
  --shadow-md:     rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;        /* dashboard preview */
  --shadow-accent: rgba(17, 12, 46, 0.12) 0px 12px 45px 0px;    /* floating hero card */
  --shadow-sm:     rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
                   rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;          /* avatar / icon cluster */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;         /* sticky nav */

  /* ---- Misc ------------------------------------------------ */
  --header-h: 64px;
}