/*
 * Astryx のテーマを、運営サイトの約束（DESIGN.md）で上書きする。手で書く（生成物ではない）。
 *
 * Astryx の部品は色・書体・角丸・影をすべて CSS カスタムプロパティ（トークン）で引く。
 * 既定の値は css/astryx.css の `:root` にあり、@layer astryx-base に入っている。
 * ここは後ろの @layer astryx-theme なので、同じトークンを書けば部品ごと入れ替わる。
 *
 * - 既定のテーマ（Figtree・青のアクセント・明暗の自動切り替え）のままにはしない
 * - 明暗は切り替えない。夜の博多湾は紺の面で見せていて、明るい本文の面と交互に置く作りなので、
 *   OS の暗い設定で本文の面まで暗くすると紺の区切りが消える（Astryx の reset は light dark にする）
 * - 純黒・純白の面は使わない（白はカードと紺の上の文字だけ）
 */
@layer reset, astryx-base, astryx-theme;

@layer astryx-theme {
  :root {
    color-scheme: light;

    /* 色。値の名前は DESIGN.md の表と同じ */
    --color-accent: #22d3ee; /* 主ボタンの塗り（--cyan） */
    --color-on-accent: #071320; /* 主ボタンの文字（--navy-1） */
    --color-accent-muted: rgba(34, 211, 238, 0.18);
    --color-text-accent: #0e7490; /* 明るい面の上のリンク（--cyan-deep） */
    --color-icon-accent: #0e7490;
    --color-text-primary: #0b1524; /* --ink */
    --color-text-secondary: #55627a; /* --ink-muted */
    --color-icon-primary: #0b1524;
    --color-icon-secondary: #55627a;
    --color-background-body: #f6f8fa; /* --bg */
    --color-background-surface: #ffffff; /* --panel（カードの白） */
    --color-background-card: #ffffff;
    --color-background-muted: rgba(15, 23, 42, 0.05);
    --color-border: #e3e8ef; /* --line */
    --color-border-emphasized: #0e7490;
    --color-background-inverted: #071320;
    --focus-outline-color: #0e7490;

    /* バッジ。NEW は緑、OSS はシアン、準備中は琥珀（灯りの暖色に寄せる） */
    --color-background-green: #dcfce7;
    --color-text-green: #166534;
    --color-background-cyan: rgba(34, 211, 238, 0.16);
    --color-text-cyan: #0e7490;
    --color-background-yellow: #fef3c7;
    --color-text-yellow: #92400e;

    /* 書体。和文はヒラギノ → Noto Sans JP、英字の見出しと数字は Outfit */
    --font-family-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    --font-family-heading: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    --font-family-code: ui-monospace, SFMono-Regular, Menlo, monospace;
    --text-body-size: 1rem;
    --text-body-leading: 1.85;
    --text-supporting-size: 0.9rem;
    --text-supporting-leading: 1.85;
    --text-code-size: 0.85em;
    --text-heading-1-size: clamp(2rem, 5.4vw, 3.2rem);
    --text-heading-1-weight: 800;
    --text-heading-1-leading: 1.3;
    --text-heading-2-size: 1.65rem;
    --text-heading-2-weight: 800;
    --text-heading-2-leading: 1.5;
    --text-heading-3-size: 1.08rem;
    --text-heading-3-weight: 700;
    --text-heading-3-leading: 1.5;

    /* 形。角丸 14px、ボタンは丸。影は2段だけ。大きいボタンは手書きの頃（0.72rem 1.5rem の余白）と同じ高さ */
    --size-element-lg: 52px;
    --radius-container: 14px;
    --radius-element: 999px;
    --shadow-low: 0 1px 3px rgba(11, 21, 36, 0.07);
    --shadow-med: 0 10px 30px rgba(11, 21, 36, 0.1);
    --shadow-high: 0 10px 30px rgba(11, 21, 36, 0.1);
  }
}