/*
 * Default Theme — Sage
 *
 * Migrated from Light Blue to Sage design system (v0.8.0).
 * CSS custom properties for easy theming. All color decisions here.
 */

:root {
    /* Primary palette — Sage */
    --primary: #5C6B59;
    --primary-dark: #3A4238;
    --primary-light: #E8EDE6;

    /* Accent colors — Sage */
    --accent: #9CA998;
    --accent-dark: #5C6B59;
    --accent-light: #E8EDE6;

    /* Secondary accent (terra — warm, replaces pink) */
    --pink: #CAB99E;
    --pink-light: #F5F0E8;

    /* Terra palette (warm secondary) */
    --terra: #CAB99E;
    --terra-lo: #DDD0BA;
    --terra-bg: rgba(202, 185, 158, 0.12);
    --terra-text: #7D6340;

    /* Background colors */
    --background: #F5F5F2;
    --card-background: #FFFFFF;
    --background-hover: #ECEEE9;

    /* Sage surface variants */
    --surface: #FFFFFF;
    --card-bg: #E8EDEA;
    --bento-bg: #EDEEE9;
    --hero-bg: #ECEEE9;

    /* Border colors */
    --border-color: rgba(35, 40, 32, 0.09);
    --border-light: rgba(35, 40, 32, 0.05);

    /* Text colors — ink hierarchy */
    --text-color: #232820;
    --text-secondary: #4A5448;
    --text-inverse: #FFFFFF;
    --ink: #232820;
    --ink-mid: #4A5448;
    --ink-faint: #8A9689;
    --title: #3A4238;
    --sage-text: #3A6850;

    /* Status colors (functional — kept universal) */
    --success: #22c55e;
    --success-dark: #15803d;
    --success-bg: #dcfce7;
    --success-text: #155724;
    --success-border: #c3e6cb;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #856404;
    --warning-border: #ffeeba;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --error-text: #721c24;
    --error-border: #f5c6cb;
    --info: #5C6B59;
    --info-bg: #E8EDE6;
    --info-text: #3A4238;
    --info-border: #9CA998;

    /* Danger (buttons) */
    --danger: #dc2626;
    --danger-dark: #b91c1c;

    /* Shadows — sage-tinted */
    --shadow-sm: 0 1px 4px rgba(35, 40, 32, 0.05);
    --shadow-md: 0 4px 16px rgba(35, 40, 32, 0.07);
    --shadow-lg: 0 8px 32px rgba(156, 169, 152, 0.18);
    --shadow-xl: 0 12px 40px rgba(156, 169, 152, 0.12);

    /* Border radius — Sage-style (larger, softer) */
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-lg: 20px;

    /* Typography */
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-serif: 'Lora', serif;
    --font-hand: 'Caveat', cursive;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Hover */
    --hover-color: #ECEEE9;

    /* Extra radii */
    --radius-pill: 100px;
    --radius-xl: 24px;

    /* Aliases — backward-compatible naming convention */
    --accent-primary: var(--primary);
    --bg-primary: var(--card-background);
    --bg-secondary: var(--background);
    --bg-accent: var(--primary-light);
    --text-primary: var(--text-color);
    --semantic-success: var(--success);
    --radius-sm: var(--border-radius-sm);
    --radius-md: var(--border-radius);
    --radius-lg: var(--border-radius-lg);
}