/*
 * Design tokens for articul-top.
 * 直値をテンプレートや他CSSに散らさず、必ずここを参照する。
 *
 * 上限値は articul.jp の実測（h3 24 / h2 28 / h1 35 / ヒーロー40、
 * 余白 36 / 72 / 108、コンテンツ幅 1332）に合わせ、狭い幅では clamp で縮める。
 * 平文は 18px / weight 500（`--at-text-body` / `--at-font-weight-body`）。
 * ボタンやラベルなど UI 文字は `--at-text-base`（16px）のまま。
 *
 * メディアクエリのブレークポイント（CSS変数は条件式に使えないため直値で記述）
 *   1200px = PC標準 / 960px = タブレット・ナビ切替 / 600px = スマホ
 */

:root {
  /* Brand */
  --at-color-primary: #851f24;
  --at-color-primary-hover: #6d191d;
  --at-color-primary-soft: #8b2528;
  --at-color-accent: #c59e60;
  --at-color-accent-hover: #b38d52;
  --at-color-accent-light: #e7c98a;

  /* Surface */
  --at-color-bg: #ffffff;
  --at-color-bg-subtle: #faf8f5;
  --at-color-bg-muted: #f3efe9;
  --at-color-bg-sand: #f2f0ec;
  --at-color-bg-cream: #fcfaf7;
  --at-color-bg-black: #000000;
  --at-gradient-heading: linear-gradient(
    to right,
    #ae684a,
    #999999 40%,
    #c89f62 100%
  );

  /* Text */
  --at-color-fg: #333333;
  --at-color-fg-strong: #2d2a28;
  --at-color-fg-muted: #7a6a5c;
  --at-color-fg-faint: #9c8e7f;
  --at-color-fg-inverse: #ffffff;
  --at-color-neutral: #545454;
  --at-color-neutral-hover: #474747;
  --at-color-heading-wine: #713f3f;

  /* Line */
  --at-color-line: #e4ded6;
  --at-color-line-strong: #cfc6ba;

  /* Spacing */
  --at-space-1: 4px;
  --at-space-2: 8px;
  --at-space-3: 12px;
  --at-space-4: 16px;
  --at-space-5: 24px;
  --at-space-6: 32px;
  --at-space-7: 40px;
  --at-space-8: 48px;
  --at-space-9: 64px;
  --at-space-10: 80px;
  --at-space-11: 96px;
  --at-space-12: 120px;

  /* Section rhythm（旧サイトの single / double / triple = 36 / 72 / 108） */
  --at-section-y: clamp(36px, 7vw, 72px);
  --at-section-y-tight: clamp(24px, 4vw, 36px);
  --at-section-y-loose: clamp(36px, 8vw, 108px);

  /*
   * articul.jp はウェブフォントを読まず、Uncode の font-family も空。
   * 実効はブラウザの sans-serif（日本語はヒラギノ角ゴ / 游ゴシック）。
   * Noto / system-ui / 明朝は使わない（旧サイトと字形が分かれるため）。
   */
  --at-font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴシック", "Yu Gothic Medium", "Yu Gothic", YuGothic,
    "游ゴシック", "游ゴシック Medium", Meiryo, "メイリオ", sans-serif;

  --at-text-xs: 0.75rem;
  --at-text-sm: 0.8125rem;
  --at-text-base: 1rem;
  --at-text-md: 1rem;
  --at-text-lg: clamp(1rem, 0.25vw + 0.94rem, 1.125rem);
  /* 平文の標準サイズ。base より 1 段階上（= lg）。 */
  --at-text-body: var(--at-text-lg);
  --at-text-xl: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --at-text-2xl: clamp(1.25rem, 0.5vw + 1.05rem, 1.5rem);
  --at-text-3xl: clamp(1.375rem, 0.7vw + 1.1rem, 1.75rem);
  --at-text-4xl: clamp(1.5rem, 1vw + 1.15rem, 2.1875rem);
  --at-text-5xl: clamp(1.625rem, 1.4vw + 1.15rem, 2.5rem);

  --at-font-weight-body: 500;
  --at-font-weight-heading: 600;

  --at-leading-tight: 1.4;
  --at-leading-normal: 1.75;
  --at-leading-relaxed: 2;
  --at-tracking-wide: 0.08em;
  --at-tracking-wider: 0.18em;

  /* Layout */
  --at-container: 1200px;
  --at-container-narrow: 820px;
  --at-container-wide: 1332px;
  --at-gutter: clamp(16px, 3vw, 36px);
  --at-header-h: 68px;

  /* Shape */
  --at-radius-sm: 2px;
  --at-radius: 8px;
  --at-radius-lg: 8px;
  --at-radius-xl: 20px;
  --at-radius-pill: 999px;

  /* Elevation */
  --at-shadow-sm: 0 1px 2px rgba(36, 31, 29, 0.06);
  --at-shadow: 0 6px 24px rgba(36, 31, 29, 0.08);
  --at-shadow-cta: 0 4px 10px rgba(0, 0, 0, 0.22);

  /* Motion */
  --at-transition: 200ms ease;

  /* Layering */
  --at-z-header: 100;
  --at-z-drawer: 200;
}

@media (max-width: 960px) {
  :root {
    --at-header-h: 60px;
  }
}