/**
 * wunderly – CSS Custom Properties (Design Tokens)
 * Based on wunderly. Design Guide v2.0
 * Light Theme default, Dark Theme via data-theme="dark"
 *
 * Z-Index Layer Map:
 *  -1  keyboard-proxy (hidden helper)
 *   2  tile__qty / badge (local stacking)
 *  10  header, bottom-nav, legal-header (sticky chrome)
 *  20  add-bar, fab, landing-close-btn (floating UI)
 *  30  toast-container (notifications)
 *  40  modal-overlay, sm-overlay (dialogs)
 *  50  emoji-picker (above modals)
 */

/* ── Google Fonts are loaded in index.html ── */

:root {
    /* ── Brand Colors (themenunabhängig) ── */
    --color-coral:       #FF6B40;
    --color-coral-light: #FF8F66;
    --color-coral-dark:  #E85A30;
    --color-peach:       #FFB088;

    /* ── Semantic Colors ── */
    --color-success:     #58CC6C;
    --color-warning:     #FFAA40;
    --color-error:       #E85A30;
    --color-shared:      #A78BFA;

    /* ── Fonts ── */
    --font-display: 'Sora', sans-serif;
    --font-body:    'Outfit', sans-serif;
    --font-mono:    'Space Mono', monospace;
    --font-serif:   'Playfair Display', serif;

    /* ── Landing Page Colors ── */
    --bg-warm:          #FAF7F2;
    --text-mid:         #6B6560;
    --text-light-alt:   #A8A29E;
    --color-teal:       #4AADA1;
    --color-teal-light: #E8F5F3;
    --color-green-light: #E8F5E9;

    /* ── Border Radius ── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 999px;

    /* ── Spacing ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;

    /* ── Motion ── */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:   0.15s;
    --dur-normal: 0.25s;
    --dur-slow:   0.4s;

    /* ── Layout ── */
    --max-width:        480px;
    --header-height:    auto;
}

/* ── Light Theme (Default) ── */
:root,
[data-theme="light"] {
    --bg-base:     #FAF7F2;
    --bg-surface:  #FAF6F0;
    --bg-elevated: #FFFFFF;
    --bg-hover:    #EDE7DC;
    --bg-input:    #EDE8E0;

    --text-primary:   #1A1818;
    --text-secondary: #6B6560;
    --text-muted:     #A09888;

    --border:        rgba(0, 0, 0, 0.07);
    --border-hover:  rgba(0, 0, 0, 0.14);
    --border-active: #FF6B40;

    --shadow-sm:   0 1px 3px rgba(80,60,40,0.06);
    --shadow-md:   0 4px 16px rgba(80,60,40,0.08);
    --shadow-lg:   0 8px 32px rgba(80,60,40,0.1);
    --shadow-glow: 0 0 24px rgba(255,107,64,0.15);

    --check-bg:          rgba(88, 204, 108, 0.08);
    --check-border:      rgba(88, 204, 108, 0.25);
    --avatar-you-bg:     linear-gradient(135deg, #FF6B40, #FF8F66);
    --avatar-partner-bg: linear-gradient(135deg, #A78BFA, #8B6FE0);
    --nav-bg:            rgba(250, 247, 242, 0.94);
    --toast-bg:          #1A1818;
    --toast-text:        #F0EEF2;
    --logo-wordmark:     #1A1818;
    --new-badge-bg:      rgba(255, 107, 64, 0.1);
    --done-since-bg:     rgba(88, 204, 108, 0.06);
    --suggest-highlight: rgba(255, 107, 64, 0.06);
    --config-bg:         #E8E3D9;
    --config-border:     var(--border);
    --tile-shadow:       0 2px 8px rgba(120, 100, 70, 0.06);
    --card-shadow:       0 2px 12px rgba(120, 100, 70, 0.07);
    --starred-card-bg:   rgba(255, 107, 64, 0.05);
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    --bg-base:     #0C0B0E;
    --bg-surface:  #1A1920;
    --bg-elevated: #212028;
    --bg-hover:    #2A2930;
    --bg-input:    #151419;

    --text-primary:   #F0EEF2;
    --text-secondary: #9490A0;
    --text-muted:     #5C586A;

    --border:        rgba(255, 255, 255, 0.06);
    --border-hover:  rgba(255, 255, 255, 0.12);
    --border-active: #FF6B40;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.2);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.24);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.32);
    --shadow-glow: 0 0 24px rgba(255,107,64,0.2);

    --check-bg:          rgba(88, 204, 108, 0.06);
    --check-border:      rgba(88, 204, 108, 0.2);
    --avatar-you-bg:     linear-gradient(135deg, #FF6B40, #FF8F66);
    --avatar-partner-bg: linear-gradient(135deg, #A78BFA, #8B6FE0);
    --nav-bg:            rgba(12, 11, 14, 0.92);
    --toast-bg:          #F0EEF2;
    --toast-text:        #0C0B0E;
    --logo-wordmark:     #F0EEF2;
    --new-badge-bg:      rgba(255, 107, 64, 0.12);
    --done-since-bg:     rgba(88, 204, 108, 0.08);
    --suggest-highlight: rgba(255, 107, 64, 0.08);
    --config-bg:         #141318;
    --config-border:     var(--border);
    --tile-shadow:       0 2px 10px rgba(0, 0, 0, 0.14);
    --card-shadow:       0 2px 12px rgba(0, 0, 0, 0.18);
    --starred-card-bg:   rgba(255, 107, 64, 0.08);

    /* ── Landing Page Overrides ── */
    --bg-warm:           #0C0B0E;
    --text-mid:          #9490A0;
    --text-light-alt:    #5C586A;
    --color-teal-light:  rgba(74, 173, 161, 0.12);
    --color-green-light: rgba(88, 204, 108, 0.1);
}