/*
 * Global design tokens for Family Hub.
 * Keep brand colors, spacing, radii, shadows and shell dimensions here.
 * components.css should consume these variables instead of redefining values.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

:root {
    --color-deep-clay: #5A3E2E;
    --color-clay-brown: #8B6355;
    --color-terracotta: #B8693A;
    --color-olive: #6B7C4A;
    --color-light-olive: #9AAD6E;
    --color-sandstone: #E8DCC8;
    --color-cream: #FBF8F3;
    --color-soft-olive: #DCE6CC;
    --color-soft-terracotta: #F0DDD0;

    --color-celebrate: #C99D7E;

    --color-temp: #6B7C4A;
    --color-temp-warm: #C99D7E;
    --color-temp-cold: #4A90E2;

    --bg-body: #F4F1EC;
    --bg-card-light: rgba(255, 255, 255, 0.84);
    --text-primary: #2E2018;
    --text-muted: #7A6050;

    --sidebar-bg: #43352B;

    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 14px 30px rgba(63, 45, 33, 0.08);

    --color-border: #E5E2DD;
    --border-soft: rgba(139, 99, 85, 0.12);

    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
    --topbar-height: 60px;
}

.dark {
    --color-clay-brown: #C4907A;
    --color-terracotta: #D4845A;
    --color-celebrate: #D4B09A;
    --color-temp: #9AAD6E;
    --bg-body: #1E1610;
    --bg-card: rgba(58, 46, 32, 0.80);
    --text-primary: #EAD8B8;
    --text-muted: #A89070;
}