/* ==========================================================================
   RYUHEIDOU / Design Tokens
   UK punk-zine (DIY flyer) — mobile first, 500px content column
   ここの値を変えると全ページの見た目が変わります。
   ========================================================================== */

:root {
    /* ----- Ink & Paper -------------------------------------------------- */
    --ink: #16120f;
    /* 主線・本文（完全な黒は使わない：コピー機のインク） */
    --ink-soft: #4a423b;
    /* 補助テキスト */
    --ink-faint: #8b8177;
    /* さらに弱いメタ情報 */

    --paper: #e9e3d6;
    /* 地：わら半紙 */
    --paper-2: #f4f0e6;
    /* カード面：少し白い紙 */
    --paper-3: #d8d0be;
    /* 沈めたい面 */

    /* ----- Brand ---------------------------------------------------------
       竜平堂のテーマカラー。ロゴの青バーから採った値。 */
    --blue: #0055a2;
    --blue-ink: #f4f0e6;
    /* 青面に乗せる文字色 */

    /* ----- Riso accents ------------------------------------------------- */
    --acid: #e8ea00;
    /* アシッドイエロー：ハイライト／ホバー */
    --red: #e5321b;
    /* 蛍光レッド：販売中・再生など「熱い」印にだけ使う */
    --pink: #ff4fa3;
    /* ショッキングピンク：差し込み用（現状未使用） */

    /* ----- セクション別アクセント（作品ページで上書きする前提） -----------
       ここを差し替えるだけで作品ごとの色を出せる。 */
    --accent: var(--blue);
    --accent-ink: var(--blue-ink);
    /* アクセント面に乗せる文字色 */

    /* ----- Type --------------------------------------------------------- */
    --font-display: 'Anton', 'Noto Sans JP', sans-serif;
    /* 見出し：極太コンデンス */
    --font-body: 'Noto Sans JP', sans-serif;
    /* 本文：日本語 */
    --font-mono: 'Courier Prime', 'Courier New', monospace;
    /* メタ情報：タイプライター */

    --fs-xs: 0.6875rem;
    /* 11px  ラベル・年月日 */
    --fs-sm: 0.8125rem;
    /* 13px  補助 */
    --fs-base: 0.9375rem;
    /* 15px  本文 */
    --fs-lg: 1.125rem;
    /* 18px  カード見出し */
    --fs-xl: 1.5rem;
    /* 24px  セクション見出し */
    --fs-2xl: 2.25rem;
    /* 36px  大見出し */

    --lh-tight: 1.05;
    --lh-snug: 1.35;
    --lh-body: 1.85;

    /* ----- Space（4pxグリッド） ----------------------------------------- */
    --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;

    /* ----- Layout ------------------------------------------------------- */
    --col-pc: 500px;
    /* レールが出る PC サイズでのカラム幅。レール込みのグリッドの中央値でもある。 */
    --col: 100%;
    /* 実際にカラムへ効く幅。レールが無い間は画面いっぱいに広げて
       左右に余白を作らない（PC サイズで layout.css が --col-pc に差し替える）。 */
    --measure: 34rem;
    /* 本文の行長の上限。カラムが広がる中間幅でだけ効かせる。 */
    --col-pad: 1.25rem;
    /* カラム内の左右余白 */
    --rail: 300px;
    /* PC時の左右レール幅（縦組みワードマーク＋ウィジェット列が入る幅） */
    --rail-gap: 2.5rem;
    /* カラムとレールの間隔 */
    --header-h: 56px;

    /* ----- Borders & Shadows（ネオブルータル寄りの硬い影） ---------------- */
    --bw: 2px;
    /* 標準罫 */
    --bw-thick: 3px;
    /* 強調罫 */
    --border: var(--bw) solid var(--ink);
    --border-thick: var(--bw-thick) solid var(--ink);
    --shadow: 4px 4px 0 0 var(--ink);
    --shadow-sm: 2px 2px 0 0 var(--ink);
    --shadow-lg: 7px 7px 0 0 var(--ink);

    /* ----- 傾き（切り貼り感）------------------------------------------- */
    --tilt-a: -1.4deg;
    --tilt-b: 1.1deg;
    --tilt-c: -0.6deg;
    --tilt-d: 2.2deg;

    /* ----- Motion ------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur: 0.18s;

    /* ----- Texture（外部画像なし：全てCSS/データURI） -------------------- */
    /* コピー機のざらつき */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* モーション削減の希望を尊重（傾き・マーキーも止める） */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tilt-a: 0deg;
        --tilt-b: 0deg;
        --tilt-c: 0deg;
        --tilt-d: 0deg;
        --dur: 0.01s;
    }
}