/* 
  OkatomoNeo Base Design Tokens — NIGHT (DARK) THEME
  Concept: Warm modern dark — welcoming, social, approachable
  カラーコンセプト: 温かみのある群青 × スカイブルー × コーラル
*/

:root {
    /* Backgrounds — 極端に暗くせず、温かみのある群青系 */
    --bg-primary:    #18202e;
    --bg-secondary:  #111827;
    --bg-card:       #1e2b3f;
    --bg-input:      #141d2b;
    --bg-hover:      #253448;
    --bg-gradient:   radial-gradient(ellipse at top, #1e3a5f 0%, #0d1526 55%, #090e1a 100%);

    /* Borders */
    --border:        #263348;
    --border-light:  #344563;

    /* Accents — スカイブルー (清潔感・誰にでも馴染む) */
    --accent:        #0ea5e9;
    --accent-light:  #38bdf8;
    --accent-text:   #ffffff;
    --accent-glow:   rgba(14, 165, 233, 0.25);
    --accent-rgb:    14, 165, 233;

    /* Accent 2 — コーラル (温かみ・親しみやすさ) */
    --accent2:       #fb7185;
    --accent2-rgb:   251, 113, 133;

    /* ロゴグラデーション — スカイブルー→コーラルオレンジ (モダン＆フレンドリー) */
    --logo-gradient: linear-gradient(135deg, #38bdf8 0%, #fb923c 100%);

    /* Status */
    --success:       #34d399;
    --warning:       #fbbf24;
    --error:         #fb7185;

    /* Text Colors */
    --text-primary:   #f0f6ff;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;

    /* Units — やや大きめの角丸で柔らかい印象に */
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     20px;
    --radius-xl:     28px;

    /* Shadows */
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:     0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.5);
    --shadow-xl:     0 20px 60px rgba(0,0,0,0.6);
}