/* ============================================================
   デザインの値（トークン）。見た目を変えるときは、まずこのファイルだけを直す。
   site.css・blog.css・navi.css はここの変数だけを使う（色の直書きをしない）。
   読みやすさの決まり（WCAG AA・本文 4.5:1 以上。数値は 2026-09-29 に計算）:
     - オレンジ（#f5920a）の上の文字は --on-brand（濃い茶 #3a2410・6.25:1）。白文字は 2.33:1 で不可。
     - 白文字を置くときは --brand-deep（#b84f00・5.05:1）か --brown（14.6:1）の上だけ。
     - 白地の上のオレンジ文字は --brand-ink（#a85600・5.26:1）。
   ============================================================ */
:root {
  /* ---- ブランドの色（ロゴ #FFA500 / #FFB800 前後・本家 STUDIO の #fdb813 → #f5920a） ---- */
  --brand-1: #fdb813;
  --brand-2: #f5920a;
  --brand-grad: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --brand-grad-v: linear-gradient(160deg, var(--brand-1) 0%, var(--brand-2) 70%);
  --brand-deep: #b84f00;       /* 白文字を置けるオレンジ（5.05:1） */
  --brand-ink: #a85600;        /* 白地の上のオレンジ文字（5.26:1） */
  --brand-soft: #fff6e5;       /* 薄いオレンジの面 */
  --brand-line: #fbd9a0;       /* 薄いオレンジの線 */
  --on-brand: #3a2410;         /* オレンジ・黄色の上の文字（6.25〜8.4:1） */
  --on-deep: #ffffff;          /* 濃いオレンジ・茶色の上の文字 */
  --brown: #3a2410;            /* 輪郭・濃いボタン */
  --cream: #fff8ec;

  /* ---- 文字・線・面 ---- */
  --ink: #1f2328;
  --ink-2: #444c56;
  --muted: #6b7280;            /* 白で 4.83:1・--bg-soft で 4.56:1。オレンジの上では使わない */
  --line: #ebe7e0;
  --line-strong: #d5d0c7;
  --bg: #ffffff;
  --bg-soft: #faf8f4;
  --footer-bg: #2a2622;
  --footer-ink: #e9e4dc;
  --footer-muted: #bdb5a9;

  /* ---- 意味の色（バッジ・お知らせ） ---- */
  --ok: #1a7f37;
  --ok-soft: #effaf2;
  --ok-line: #bfe5c9;
  --warn-soft: #fff8e6;
  --warn-line: #f3d58a;
  --danger: #b42318;
  --danger-soft: #fdf0ef;
  --danger-line: #f2c1bd;
  --info: #1d4f91;
  --info-soft: #f1f6ff;
  --info-line: #cfe0fb;
  --pr-ink: #4a4f57;
  --pr-line: #8a8f98;

  /* ---- ブログのトップ（全面の写真の上の重ね）。文字は --on-brand（濃い茶）で、重ね（scrim）の上だけに置く。
         写真が真っ白でも真っ黒でも 4.5:1 以上になる濃さ（tests/test_app_visual.py で計算: 真っ白の写真で 6.78:1・真っ黒の写真で 5.07:1 以上）。 ---- */
  --hero-tint: rgba(245, 146, 10, .16);      /* 写真全体にかける薄いオレンジ */
  --hero-scrim-1: rgba(253, 184, 19, .84);   /* 文字の下の重ね（左上） */
  --hero-scrim-2: rgba(245, 146, 10, .88);   /* 文字の下の重ね（右下） */
  --hero-photo-h: 58vw;                      /* スマホ: 写真がはっきり見える上の部分の高さ */
  --hero-text-w: 35rem;                      /* PC: 文字の幅（重ねはこの右まで必ずかかる） */

  /* ---- 模様（写真の仮の面・網点） ---- */
  --dots-on-brand: radial-gradient(rgba(255, 255, 255, .38) 1.2px, transparent 1.4px);
  --dots-on-light: radial-gradient(rgba(245, 146, 10, .22) 1.2px, transparent 1.4px);
  --dots-size: 9px 9px;
  --stripes: repeating-linear-gradient(135deg, rgba(58, 36, 16, .05) 0 10px, transparent 10px 20px);

  /* ---- 書体 ---- */
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Jost", "Inter", "Noto Sans JP", system-ui, sans-serif;   /* 大きな英字 */
  --font-hand: "Yomogi", "Zen Kurenaido", "Klee One", "Noto Sans JP", cursive;  /* 手書き風のキャッチ */
  --font-num: "Jost", "Inter", var(--font);
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.08rem;
  --fs-h1: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h2: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  --fs-h3: 1.1rem;
  --fs-hero: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem);
  --fs-display: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
  --fs-bg-word: clamp(4.5rem, 2rem + 11vw, 13rem);
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh: 1.8;
  --lh-tight: 1.45;
  --tracking: .02em;

  /* ---- 余白（4px 刻み） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --section-y: clamp(56px, 7vw, 104px);

  /* ---- 角丸・影・輪郭 ---- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(31, 35, 40, .04), 0 6px 20px rgba(31, 35, 40, .06);
  --shadow-btn: 0 4px 14px rgba(184, 79, 0, .22);
  --outline: 2px solid var(--brown);
  --offset: 5px;               /* 「ずらした影」の幅（ワカチョクWEB のボタン・カード） */
  --focus-ring: 0 0 0 3px rgba(184, 79, 0, .35);

  /* ---- 配置 ---- */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --gutter: 16px;
  --header-h: 64px;
  --logo-h: 30px;
  --logo-h-mobile: 28px;

  /* ---- 動き（軽いものだけ。prefers-reduced-motion では止める） ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .15s;
  --dur: .45s;
  --dur-open: .8s;
  --reveal-shift: 16px;
  --spin: 60s;
}

/* ---- サイトごとの上書き ---- */
/* blog（公式サイト風・まじめで元気）: 角は少し小さく、英字は大きく */
body.site-blog {
  --radius: 12px;
  --radius-sm: 8px;
}
/* ワカチョクWEB（楽しく・読みやすく）: 丸く、輪郭とずらした影を使う */
body.site-navi {
  --radius: 18px;
  --radius-sm: 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-open: 0s; --reveal-shift: 0px; }
}