/* ============================================================
   variables.css – Design tokens for Familienplaner
   ============================================================ */

:root {
    /* Brand colors */
    --color-primary:        #4f46e5;
    --color-primary-hover:  #4338ca;
    --color-primary-light:  #e0e7ff;
    --color-secondary:      #7c3aed;
    --color-secondary-hover:#6d28d9;

    /* Semantic colors */
    --color-success:        #16a34a;
    --color-success-bg:     #dcfce7;
    --color-warning:        #d97706;
    --color-warning-bg:     #fef3c7;
    --color-danger:         #dc2626;
    --color-danger-bg:      #fee2e2;
    --color-info:           #0284c7;
    --color-info-bg:        #e0f2fe;

    /* Neutrals */
    --color-white:          #ffffff;
    --color-gray-50:        #f9fafb;
    --color-gray-100:       #f3f4f6;
    --color-gray-200:       #e5e7eb;
    --color-gray-300:       #d1d5db;
    --color-gray-400:       #9ca3af;
    --color-gray-500:       #6b7280;
    --color-gray-600:       #4b5563;
    --color-gray-700:       #374151;
    --color-gray-800:       #1f2937;
    --color-gray-900:       #111827;

    /* Background / Surface */
    --bg-body:              #f0f2f5;
    --bg-surface:           #ffffff;
    --bg-surface-hover:     #f9fafb;
    --bg-muted:             #f3f4f6;

    /* Text */
    --text-primary:         #111827;
    --text-secondary:       #4b5563;
    --text-muted:           #9ca3af;
    --text-on-primary:      #ffffff;

    /* Border */
    --border-color:         #e5e7eb;
    --border-radius-sm:     0.25rem;
    --border-radius:        0.5rem;
    --border-radius-lg:     0.75rem;
    --border-radius-xl:     1rem;
    --border-radius-full:   9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Spacing scale */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;

    /* Typography */
    --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --line-height:    1.5;

    /* Layout */
    --header-height:    3.5rem;
    --bottom-nav-height:4rem;
    --sidebar-width:    14rem;
    --container-max:    72rem;
    --transition:       150ms ease;
}

/* ── Dark mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-body:          #0f172a;
        --bg-surface:       #1e293b;
        --bg-surface-hover: #273347;
        --bg-muted:         #1e293b;

        --text-primary:     #f1f5f9;
        --text-secondary:   #94a3b8;
        --text-muted:       #64748b;

        --border-color:     #334155;

        --color-gray-50:    #1e293b;
        --color-gray-100:   #273347;
        --color-gray-200:   #334155;
        --color-gray-300:   #475569;
        --color-gray-400:   #64748b;
        --color-gray-500:   #94a3b8;

        --color-primary-light: #1e1b4b;
    }
}