/* ========================================== */
/* Theme Variables - Glimmer OS               */
/* Light defaults + Dark mode overrides       */
/* ========================================== */

/* === Light Mode (defaults) === */
:root {
    /* Page backgrounds */
    --bg-body: #eae6e9;
    --bg-screen: linear-gradient(135deg, #f7f3f0 0%, #eaddf7 100%);
    --bg-color: #e3e8ef;
    --app-bg: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

    /* Card & Glass */
    --surface-card: rgba(255, 252, 250, 0.7);
    --card-bg: #ffffff;
    --card-border: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 10px 30px rgba(189, 175, 175, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

    /* Text */
    --text-main: #6d6466;
    --text-body: #666666;
    --text-sub: #6b7280;
    --text-muted: #aeb0b8;
    --text-primary: #6d6466;
    --text-secondary: #aeb0b8;
    --text-tertiary: #c5c7cf;
    --text-placeholder: #999999;

    /* Borders */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-card: rgba(255, 255, 255, 0.9);

    /* Icons */
    --icon-cocoa: #8d6e63;
    --icon-taro: #9575cd;
    --icon-pink: #f48fb1;
    --icon-blue: #90caf9;
}

/* === Dark Mode Overrides === */
body.dark-mode {
    /* Page backgrounds */
    --bg-body: #0f1923;
    --bg-screen: #0f1923;
    --bg-color: #0f1923;
    --app-bg: #0f1923;

    /* Card & Glass */
    --surface-card: rgba(255, 255, 255, 0.05);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --glass-bg: rgba(15, 25, 40, 0.85);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

    /* Text */
    --text-main: #eae8e6;
    --text-body: #7a8a9e;
    --text-sub: #7a8a9e;
    --text-muted: #4a5568;
    --text-primary: #eae8e6;
    --text-secondary: #7a8a9e;
    --text-tertiary: #4a5568;
    --text-placeholder: #4a5568;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-card: rgba(255, 255, 255, 0.08);

    /* Icons - dimmed for dark */
    --icon-cocoa: #d6d2d0;
    --icon-taro: #b39ddb;
    --icon-pink: #f8bbd0;
    --icon-blue: #7db8e0;

    /* Dark-only utility vars */
    --dm-bg-deep: linear-gradient(180deg, #0c1929 0%, #060606 100%);
    --dm-bg-hover: rgba(255, 255, 255, 0.06);
    --dm-bg-active: rgba(255, 255, 255, 0.08);
    --dm-glass-blur: blur(24px);
    --dm-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
}