@charset "UTF-8";

/*
 * ココロの窓口 デザイントークン
 * メインサイト（layouts/site, site_no_menu, simple）全体で使う変数定義。
 * 値を変更すると common/home/layout/worker/worker_layout/question.css の
 * var() 参照箇所に一括反映される。出現頻度の低い一点物の色はトークン化していない。
 */
:root {
    /* ブランドカラー（ティール系） */
    --color-primary: #18a798;
    --color-primary-dark: #429084;
    --color-primary-bright: #18c6b4;
    --color-primary-light: #1ecbb9;
    --color-primary-soft: #6cc6b5;
    --color-primary-pale: #bbe8e0;

    /* アクセント（コーラル系） */
    --color-accent: #fa8582;
    --color-accent-soft: #fe8d8a;

    /* 背景 */
    --color-bg-warm: #faf7f3;
    --color-bg-tint: #ecfaf7;

    /* 強調・評価 */
    --color-star: #ffce00;
    --color-highlight: #fffd65;
    --color-orange: #ffa700;
    --color-brown: #95610e;

    /* テキスト */
    --color-text-dark: #333;
    --color-text-sub: #5c5c5c;
    --color-text-muted: #888;
    --color-text-weak: #a7a7a7;

    /* ボーダー */
    --color-border-strong: #a2a2a2;
    --color-border: #d1d1d1;
    --color-border-soft: #c7c7c7;

    /* フォント */
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;
    --font-en: 'Poppins', sans-serif;

    /* 角丸 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-2xl: 20px;

    /* 影 */
    --shadow-card: 3px 3px 20px 0px rgba(0, 0, 0, 0.1);

    /*
     * 流体タイプスケール（PC 1024px以上での使用を想定・2560pxまで検証済み）
     * 2段勾配: 1280pxまでは既存デザインのvw係数そのまま、それ以上は
     * min()で勾配を半分に落とし、2560pxで1280px時の1.5倍に到達して停止。
     * 下限=1024px付近での判読性確保、上限=2560px到達値。
     */
    --fs-2xl: clamp(24px, min(2.4vw, calc(1.2vw + 15.36px)), 46px);
    --fs-lg: clamp(14px, min(1.302083vw, calc(0.651vw + 8.33px)), 25px);
    --fs-md: clamp(13px, min(1.0416vw, calc(0.5208vw + 6.67px)), 20px);
    --fs-sm: clamp(11px, min(0.8333vw, calc(0.41665vw + 5.33px)), 16px);
    --fs-xs: clamp(10px, min(0.625vw, calc(0.3125vw + 4px)), 12px);

    /* 流体余白スケール（タイプスケールと同じ2段勾配） */
    --space-2xs: clamp(5px, min(0.5208vw, calc(0.2604vw + 3.33px)), 10px);
    --space-xs: clamp(8px, min(0.8333vw, calc(0.41665vw + 5.33px)), 16px);
    --space-sm: clamp(10px, min(1.0416vw, calc(0.5208vw + 6.67px)), 20px);
    --space-md: clamp(20px, min(2.0833vw, calc(1.04165vw + 13.33px)), 40px);
    --space-section: clamp(40px, min(5.2083vw, calc(2.60415vw + 33.33px)), 100px);
}