@charset "utf-8";
/* ==========================================================================
   variables.css — トークンのSSOT
   キャストモ（castomo.net） / Register III（明） / structure: static

   値を変えるのはこのファイルだけ。他のCSSは必ず var() 経由で参照する。
   --c-* は design-lint が彩度帯を検査する。増やすときは .design.json の
   tokenRoles に役割を登録すること（未登録は警告になる）。

   ※ chroma は HSL の max-min（OKLCH ではない）。暖色は明るいほど chroma が
     出やすく、不変層（bg/surface/border/text）の上限に当たりやすい。
   ========================================================================== */

:root{

  /* ---- 色：役割トークン ---------------------------------------------------- */
  --c-bg:#fffdf7;            /* bg        ページ全体の地色（クリーム） */
  --c-surface:#ffffff;       /* surface   カード・入力欄の地色 */
  --c-primary-pale:#fbf4da;  /* pale      帯の面・バッジ・ピル（旧 #fff6d6 は c16。pale上限13へ再導出） */
  --c-border:#e8e3d4;        /* border    標準の境界線（旧 #e8e2d2 は c9） */
  --c-border-2:#f0eadb;      /* border    表組みの内側の弱い区切り */
  --c-border-3:#ded8c9;      /* border    入力欄の枠（旧 #ddd5bf は c12 かつ L81 で下限割れ） */
  --c-border-4:#e3dfcf;      /* border    帯セクションの上境界（旧 #f0e5bf は c19） */
  --c-text:#1f2126;          /* text      見出しと本文（旧 --ink-2 #3a3d45 を統合） */
  --c-text-2:#2a2718;        /* text      淡黄地の上の濃色文字（旧 #4a4415 系4色を統合・再導出） */
  --c-text-deep:#0e0f11;     /* text      ボタンのホバー（旧 #000 は L0 で下限4割れ） */
  --c-text-muted:#6b6e78;    /* textMuted 補助テキスト */
  --c-text-muted-2:#8c8578;  /* textMuted 注釈・単位（旧 .note の #a8a294 を統合） */
  --c-primary:#8a7a25;       /* primary   ラベル・リンク・アイコンの線 */
  --c-alert:#8f483d;         /* alert     入力エラーの表示（LPに赤系が無いため新設。bg上 6.5:1） */
  --c-accent:#f5d33a;        /* design-lint-ignore: イベント／エンタメLPのアクセント。Register III の accent 上限 S60%（#d8c164）では訴求が立たず「くすんで暗い」とマサキ判断。原案 #ffd83d 相当まで戻した（S90%）。黒文字 10.9:1 で可読性は確保 */

  /* ---- 色：暗色サーフェス用の派生値 ----------------------------------------
     帯システムには「暗い面の上のテキスト／境界」に当たる役割が無い。
     --c-* で定義すると役割未定義の警告になるため、別の名前空間で持つ。
     いずれも --c-bg / --c-text の不透明度違いで、独立した色ではない。 */
  --ondark-strong:rgba(255,253,247,.82);
  --ondark:rgba(255,253,247,.72);
  --ondark-mid:rgba(255,253,247,.6);
  --ondark-weak:rgba(255,253,247,.45);
  --ondark-line-strong:rgba(255,253,247,.24);
  --ondark-line:rgba(255,253,247,.18);
  --ondark-line-weak:rgba(255,253,247,.14);
  --ondark-fill:rgba(255,253,247,.1);   /* 暗色面に浮かせるパネルの地 */
  --sheet:rgba(255,253,247,.96);
  --scrim-strong:rgba(31,33,38,.55);
  --scrim-mid:rgba(31,33,38,.5);
  --scrim-weak:rgba(31,33,38,.1);
  --scrim-0:rgba(31,33,38,0);
  /* 暗色面に落とすスポットライト（accent 由来。丸く、縁がぼける） */
  --spot:rgba(245,211,58,.14);
  --spot-0:rgba(245,211,58,0);

  /* ---- タイポ：typeScale 正典 ----------------------------------------------
     design-tokens.json と同値。値の改変と clamp の自作は禁止。 */
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-ml:clamp(18px, calc(14.4px + 0.96vw), 24px);
  --text-lg:clamp(24px, calc(-2.08px + 6.96vw), 40px);
  --text-xl:clamp(32px, calc(23.55px + 2.25vw), 56px);
  --text-2xl:clamp(40px, calc(-0.99px + 10.9vw), 72px);

  --sans:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN",serif;

  /* ---- 角丸 -----------------------------------------------------------------
     reason: 未経験者・学生に向けた求職LPで、硬さより親しみやすさを優先するため
     推奨帯(0〜4px)を超える角丸を採る。バッジとドットは丸形。
     判断をこの1箇所に集約し、各所は var() で参照する。 */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;

  /* ---- レイアウト -------------------------------------------------------------- */
  /* viewport-fit=cover で横向き時に左右がノッチ側へ食い込むため、
     余白はインセット以上を保つ。縦向きでは env() が 0 なので 40px のまま */
  --pad:max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --maxw:1200px;
  /* 背景を全幅に伸ばしつつ、中身を --maxw に収めるための左右余白。
     --bleed  = --maxw 枠の外側にはみ出す分。帯の中身が自前で --pad を持つ場合に使う
     --gutter = --bleed ＋ --pad。帯が直接パディングを持つ場合に使う
     両者を足しているので、どちらの型の帯でも中身の開始位置が揃う。
     % は使用先の包含ブロック（= 全幅）に対して解決される。 */
  --bleed:max(0px, (100% - var(--maxw)) / 2);
  --gutter:calc(var(--bleed) + var(--pad));
}

@media (max-width:834px){ :root{ --pad:24px } }
@media (max-width:600px){ :root{ --pad:20px } }