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

:root {
    /* === BRAND COLORS === */
    --color-primary: #1e3a5f;        /* メインブランド色 */
    --color-secondary: #2c5aa0;      /* セカンダリブランド色 */
    --color-accent: #87a878;         /* アクセント色 */
    --color-accent-light: #759665;   /* 薄いアクセント色 */

    /* === RGB VALUES FOR RGBA === */
    --color-primary-rgb: 30, 58, 95;     /* #1e3a5f のRGB値 */
    --color-secondary-rgb: 44, 90, 160;  /* #2c5aa0 のRGB値 */

    /* === TEXT COLORS === */
    --color-text-primary: #1e3a5f;   /* 主要テキスト */
    --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(30, 58, 95, 0.03);

    /* === BORDER COLORS === */
    --color-border-light: rgba(135, 168, 120, 0.15);
    --color-border-medium: rgba(135, 168, 120, 0.2);
    --color-border-strong: rgba(135, 168, 120, 0.3);

    /* === SHADOW COLORS === */
    --shadow-light: 0 8px 25px rgba(30, 58, 95, 0.08);
    --shadow-medium: 0 20px 60px rgba(30, 58, 95, 0.12);
    --shadow-strong: 0 30px 80px rgba(30, 58, 95, 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);
}