/* ==========================================================
   Le Pont Design System
   ----------------------------------------------------------
   File    : foundation.css
   Project : がんばる中高生応援ノート
   Purpose : サイト全体で使用するDesign Tokens
   Author  : Le Pont Design
   Version : 1.0.0
   Updated : 2026-07-08
========================================================== */

:root{

    /* ==========================================================
       Color
    ========================================================== */
    
    /* Primary（ブランドカラー） */
    --color-primary: #7F9F87;
    --color-primary-light: #A9BDAE;   /* ボーダー・Hover */
    --color-primary-soft: #F4F8F4;    /* 背景 */

    /* Accent（アクセントカラー） */
    --color-accent: #B98A5F;
    --color-accent-soft: #FBF6F1;     /* 背景 */

    /* Text（文字） */
    --color-text: #444444;
    --color-text-light: #777777;      /* 補足説明 */
    --color-text-muted: #999999;      /* キャプション */

    /* Background */
    --color-bg: #FBF9F6;
    --color-white: #FFFFFF;

    /* Border */
    --color-border: #E3E0DB;
    
    
    
    /* ==========================================================
       Font
    ========================================================== */
    
    --font-base:
    "BIZ UDPGothic",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Sans",
    sans-serif;
    
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-s: 0.875rem;   /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-l: 1.125rem;   /* 18px */
    --font-size-xl: 1.5rem;    /* 24px */

    --line-height-base: 2;
    --line-height-heading: 1.5;
    
    /* ==========================================================
       Layout
    ========================================================== */
    
    --content-width:860px;
    
    --content-narrow:720px;
    
    
    
    /* ==========================================================
       Radius
    ========================================================== */
    
    --radius-s:8px;
    --radius-m:14px;
    --radius-l:24px;
    
    
    
    /* ==========================================================
       Shadow
    ========================================================== */
    
    --shadow-s:
    0 3px 12px rgba(0,0,0,.05);
    
    --shadow-m:
    0 8px 20px rgba(0,0,0,.08);
    
    
    
    /* ==========================================================
       Space
    ========================================================== */
    
    --space-xs:8px;
    --space-s:16px;
    --space-m:24px;
    --space-l:40px;
    --space-xl:64px;
    
    }