/* デザインの数字（和紙と紺。2026-10-21 本人が世界観をそろえた案を承認）。B案の数字を元に、色と書体を和に寄せた。部品の形は wa.css。
   サイトの見た目はこのファイルだけで切り替える。
   決まりの理由は knowledge/design-rules.md。値を足す時は、役割（何に使うか）を先に決める。 */
:root {
  /* 色は役割で決める。正本は ~/.claude/skills/dsn-slide-layout/brands/masaken-kawara.md（名刺の決定案7、2026-10-21 本人） */
  --c-text: #1e1e1e;
  --c-accent: #1f2c45;           /* 紺（メイン）。ボタン、ラベル、番号 */
  --c-accent-strong: #141d30;    /* 紺を押した時 */
  --c-ai: #2e5788;               /* 藍。グラデーションの明るい側、細い線 */
  --c-on-accent: #fefefe;
  --c-inverse-bg: #1f2c45;       /* 暗い面（フッター） */
  --c-inverse-text: #fefefe;
  --c-inverse-muted: #c3cbd8;
  --g-kon: linear-gradient(135deg, #2e5788 0%, #1f2c45 70%);  /* 名刺7のグラデーション。面の大きい所だけに使う */
  --c-line-app: #047a37;         /* LINE のボタンだけに使う */
  --c-line-app-strong: #03652d;
  --c-bg: #f4efe4;                /* 和紙。明るい面の地 */
  --c-surface: #fbf8f1;          /* 明るい和紙。札・表の地 */
  --c-text-muted: #4f4b43;
  --c-line: rgb(31 44 69 / 0.2);
  --c-accent-soft: #e9edf3;
  --c-washi: #f4efe4;            /* 和紙 */
  --c-washi-l: #fbf8f1;          /* 明るい和紙（札の地） */
  --c-ai-l: #9db4d6;             /* 薄藍。紺の面の番号と細い線 */
  --c-night: #141c2e;            /* 夜。鬼瓦の帯とフッター */
  /* 和紙のむら。地の色に薄く重ねる */
  --washi-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --eave: 24px;                  /* 軒先の瓦（面の下の半円）の高さ */

  /* 書体。見出しは筆の入りがある明朝（しっぽり明朝）、本文はゴシック */
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-heading: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-fude: "Yuji Syuku", "Shippori Mincho B1", serif;  /* 見出しの左の1字と漢数字 */
  --font-latin: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --fw-regular: 400;
  --fw-bold: 700;

  /* 文字の大きさ。画面幅 360px→1440px でなめらかに変わる。使うのはこの段階だけ */
  --fs-xs: 0.8125rem;                                    /* 13 注記 */
  --fs-sm: 0.875rem;                                     /* 14 ラベル・補足 */
  --fs-base: clamp(1.0625rem, 1.04rem + 0.093vw, 1.125rem); /* 17→18 本文。50歳以上が読むので大きめ */
  --fs-lg: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18→20 導入文 */
  --fs-h3: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);    /* 20→24 部品の題 */
  --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3.125rem);  /* 30→50 見出しの差を A より大きく */
  --fs-h1: clamp(2.25rem, 1.583rem + 2.963vw, 4.25rem);  /* 36→68 ページの見出し */
  --fs-display: clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem); /* 36→68 トップの一言（PC は縦書き） */
  --lh-body: 1.9;
  --lh-heading: 1.4;
  --lh-tight: 1.2;
  --tracking-body: 0.04em;
  --tracking-heading: 0.02em;
  --tracking-label: 0.14em;

  /* 余白の段階（近接）。部品の中 < 部品どうし < セクションどうし を必ず守る */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --gap-inner: var(--sp-4);                          /* 部品の中（題と説明の間） */
  --gap-item: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);  /* 部品どうし */
  --gap-head: clamp(2.5rem, 2rem + 2.2vw, 4rem);      /* 見出しと中身の間 */
  --gap-section: clamp(5rem, 3.5rem + 6.5vw, 10rem);  /* セクションどうし */
  --gutter: clamp(1.25rem, 0.5rem + 3.6vw, 4rem);    /* 画面の左右の余白（最小20px） */

  /* 幅（整列）。本文の1行は日本語で35〜40字に収める */
  --w-content: 72rem;   /* 1152 */
  --w-wide: 90rem;      /* 1440 */
  --w-narrow: 46rem;    /* 736 */
  --measure: 40em;

  /* 形（反復）。瓦の角に合わせてほぼ角のまま */
  --radius: 0;
  --radius-sm: 0;
  --radius-pill: 0;
  --shadow: 0 10px 28px -16px rgb(30 30 30 / 0.3);
  --header-h: 5rem;

  /* 動き */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;   /* 押した・触れた */
  --dur-2: 320ms;   /* 開く・閉じる */
  --dur-3: 900ms;   /* 表示される */

  --scene-1: #1f2c45;
  --scene-2: #2e5788;
  --scene-3: #f4efe4;
}
@media (max-width: 47.5rem) { :root { --eave: 16px; } }