/* Kindred design tokens. Components must use these variables. */

:root {
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-sans: "Outfit", "Segoe UI", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: clamp(2.4rem, 5vw, 4.15rem);
    --line-tight: 1.12;
    --line-body: 1.55;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 999px;
    --container: 1120px;
    --container-narrow: 720px;
    --nav-height: 72px;
    --bottom-nav-height: 68px;
    --transition: 180ms ease;
    --shadow-sm: 0 1px 2px rgba(28, 23, 20, 0.06);
    --shadow-md: 0 12px 32px rgba(28, 23, 20, 0.07);
    --shadow-lg: 0 24px 60px rgba(28, 23, 20, 0.12);
    color-scheme: light;
}

:root,
[data-theme="light"] {
    --color-primary: #9c3d1c;
    --color-primary-hover: #7e3016;
    --color-primary-soft: #f6e4da;
    --color-on-primary: #fffaf7;
    --color-secondary: #1f4a3e;
    --color-secondary-hover: #16382f;
    --color-secondary-soft: #e5f1ec;
    --color-on-secondary: #f4fbf8;
    --color-background: #f6f1eb;
    --color-surface: #fffcf9;
    --color-surface-raised: #ffffff;
    --color-text: #1c1714;
    --color-text-muted: #5c534c;
    --color-border: #e6dcd2;
    --color-success: #1e6b45;
    --color-success-soft: #e5f3eb;
    --color-warning: #8a5a16;
    --color-warning-soft: #f8efdc;
    --color-danger: #9b332c;
    --color-danger-soft: #f8e6e3;
    --color-link: #8c3418;
    --color-link-hover: #6d2610;
    --color-dating: #9c3d1c;
    --color-professional: #1f4a3e;
    --color-friendship: #3e5878;
    --color-overlay: rgba(28, 23, 20, 0.46);
    --shadow-sm: 0 1px 2px rgba(28, 23, 20, 0.06);
    --shadow-md: 0 12px 32px rgba(28, 23, 20, 0.07);
    --shadow-lg: 0 24px 60px rgba(28, 23, 20, 0.12);
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #e7a184;
    --color-primary-hover: #f0b79f;
    --color-primary-soft: #3a261e;
    --color-on-primary: #2a140e;
    --color-secondary: #8fcbb4;
    --color-secondary-hover: #b5decd;
    --color-secondary-soft: #1a2c26;
    --color-on-secondary: #10211b;
    --color-background: #141210;
    --color-surface: #1e1b18;
    --color-surface-raised: #26221e;
    --color-text: #f4efe8;
    --color-text-muted: #c4b6a8;
    --color-border: #3a332d;
    --color-success: #8dcead;
    --color-success-soft: #1a2c22;
    --color-warning: #e2b56a;
    --color-warning-soft: #2e2618;
    --color-danger: #f0a29b;
    --color-danger-soft: #3a2220;
    --color-link: #f0b59a;
    --color-link-hover: #f7d2c0;
    --color-dating: #e7a184;
    --color-professional: #8fcbb4;
    --color-friendship: #a9c0dc;
    --color-overlay: rgba(0, 0, 0, 0.62);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        color-scheme: dark;
        --color-primary: #e7a184;
        --color-primary-hover: #f0b79f;
        --color-primary-soft: #3a261e;
        --color-on-primary: #2a140e;
        --color-secondary: #8fcbb4;
        --color-secondary-hover: #b5decd;
        --color-secondary-soft: #1a2c26;
        --color-on-secondary: #10211b;
        --color-background: #141210;
        --color-surface: #1e1b18;
        --color-surface-raised: #26221e;
        --color-text: #f4efe8;
        --color-text-muted: #c4b6a8;
        --color-border: #3a332d;
        --color-success: #8dcead;
        --color-success-soft: #1a2c22;
        --color-warning: #e2b56a;
        --color-warning-soft: #2e2618;
        --color-danger: #f0a29b;
        --color-danger-soft: #3a2220;
        --color-link: #f0b59a;
        --color-link-hover: #f7d2c0;
        --color-dating: #e7a184;
        --color-professional: #8fcbb4;
        --color-friendship: #a9c0dc;
        --color-overlay: rgba(0, 0, 0, 0.62);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.4);
    }
}