/* キーワード */
color: red;
color: transparent;
color: currentColor; /* 親のcolorを継承 */

/* HEX */
color: #ff0000;    /* RGB */
color: #ff000080;  /* RGBA（最後2桁が透明度） */
color: #f00;       /* 短縮形 */

/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 50%);  /* モダン構文 */

/* HSL（Hue Saturation Lightness）*/
color: hsl(0, 100%, 50%);       /* 赤 */
color: hsl(120, 100%, 50%);     /* 緑 */
color: hsl(240, 100%, 50%);     /* 青 */
color: hsl(0 100% 50% / 70%);  /* モダン構文 */

/* OKLCH（知覚均等、推奨）*/
color: oklch(0.7 0.15 30);   /* lightness chroma hue */

/* カラーミックス */
color: color-mix(in srgb, blue 30%, white);

/* 定義（:root でグローバル） */
:root {
    --color-primary:   #10b981;
    --color-secondary: #14b8a6;
    --color-text:      #111827;
    --color-bg:        #f9fafb;
    --spacing-base:    1rem;
    --radius:          8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ダークモードで上書き */
.dark {
    --color-text: #f1f5f9;
    --color-bg:   #0f172a;
}

/* 使用 */
.card {
    color:            var(--color-text);
    background-color: var(--color-bg);
    border-radius:    var(--radius);
    padding:          var(--spacing-base);
    box-shadow:       var(--shadow-sm);

    /* フォールバック値 */
    color: var(--color-accent, #6366f1);
}

/* JavaScriptから操作 */
/* el.style.setProperty('--color-primary', '#ff0000'); */

.box {
    /* 背景色 */
    background-color: #f0fdf4;

    /* 背景画像 */
    background-image: url('/images/bg.jpg');
    background-repeat: no-repeat;    /* repeat | repeat-x | repeat-y */
    background-position: center top; /* または: 50% 0% */
    background-size: cover;          /* cover | contain | 100% auto */
    background-attachment: fixed;    /* スクロール時に固定 */
    background-origin: border-box;   /* padding-box | content-box */
    background-clip: text;           /* テキスト形状でクリップ */

    /* 短縮形 */
    background: url('/bg.jpg') center/cover no-repeat #f0fdf4;

    /* 複数背景 */
    background:
        url('overlay.png') top left no-repeat,
        url('texture.jpg') center/cover;
}

/* 線形グラデーション */
.linear {
    background: linear-gradient(to right, #10b981, #3b82f6);
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    /* 複数カラーストップ */
    background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

/* 放射状グラデーション */
.radial {
    background: radial-gradient(circle, #10b981, #0f172a);
    background: radial-gradient(ellipse at top, #e0f2fe, #0f172a);
}

/* 扇形グラデーション（円グラフなどに）*/
.conic {
    background: conic-gradient(#10b981 0% 25%, #3b82f6 25% 50%, #f59e0b 50% 75%, #ef4444 75%);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* テキストグラデーション */
.gradient-text {
    background: linear-gradient(to right, #10b981, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}