/* ========================================
   StepAgain専用色設定
   ======================================== */
@import url("base.css");
@import url("utilities.css");

:root {
    /* === BRAND COLORS === */
    --color-primary: #0891b2;        /* メインブランド色 (シアンブルー) */
    --color-secondary: #0c4a6e;      /* セカンダリブランド色 (深いシアン) */
    --color-accent: #10b981;         /* アクセント色 (エメラルドグリーン) */
    --color-accent-light: #34d399;   /* 薄いアクセント色 (明るいエメラルド) */

    /* === RGB VALUES FOR RGBA === */
    --color-primary-rgb: 8, 145, 178;    /* #0891b2 のRGB値 */
    --color-secondary-rgb: 12, 74, 110;  /* #0c4a6e のRGB値 */

    /* === TEXT COLORS === */
    --color-text-primary: #0c4a6e;   /* 主要テキスト */
    --color-text-secondary: #555;    /* 副次テキスト */
    --color-text-muted: #666;        /* 薄いテキスト */
    --color-text-light: #777;        /* 軽いテキスト */

    /* === SURFACE COLORS === */
    --color-surface-primary: #ffffff;
    --color-surface-light: #f8f9fa;
    --color-surface-gray: #e9ecef;
    --color-surface-overlay: rgba(8, 145, 178, 0.03);

    /* === BORDER COLORS === */
    --color-border-light: rgba(16, 185, 129, 0.15);
    --color-border-medium: rgba(16, 185, 129, 0.2);
    --color-border-strong: rgba(16, 185, 129, 0.3);

    /* === SHADOW COLORS === */
    --shadow-light: 0 8px 25px rgba(8, 145, 178, 0.08);
    --shadow-medium: 0 20px 60px rgba(8, 145, 178, 0.12);
    --shadow-strong: 0 30px 80px rgba(8, 145, 178, 0.18);

    /* === GRADIENTS === */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    --gradient-surface: linear-gradient(135deg, var(--color-surface-light), var(--color-surface-gray));

    /* === SPACING & SIZING === */
    --spacing-xs: 15px;
    --spacing-sm: 25px;
    --spacing-md: 40px;
    --spacing-lg: 60px;
    --radius-sm: 18px;
    --radius-md: 24px;
    --radius-lg: 28px;

    /* === TRANSITIONS === */
    --transition-unified: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* === HERO OVERLAY COLORS === */
    --hero-overlay-start: rgba(var(--color-primary-rgb), 0.75);
    --hero-overlay-end: rgba(var(--color-secondary-rgb), 0.65);
    --hero-overlay-start-mobile: rgba(var(--color-primary-rgb), 0.8);
    --hero-overlay-end-mobile: rgba(var(--color-secondary-rgb), 0.7);
}