/*
 * 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;

    /* ─────────────────────────────────────────────────────────────
     * Blueprint alignment — Phase E.2 (v0.21.2)
     * Additive token set: spacing scale, motion durations, named
     * easings, border widths, icon sizes. Existing tokens above are
     * unchanged. Values derived from Pensio's actual usage
     * frequencies; naming keeps `--space-base` for the 1rem unit
     * and reserves `--space-md` for Pensio's heavily-used 12px.
     * Plan: docs/phases/v0.21.1-design-system-audit.md
     * ─────────────────────────────────────────────────────────────
     */

    /* Spacing scale (Pensio mapping) */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.375rem;   /* 6px — off-grid, heavily used */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px — off-grid, heavily used */
    --space-base: 1rem;     /* 16px — canonical 1-unit */
    --space-lg: 1.25rem;    /* 20px — off-grid, heavily used */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */

    /* Motion durations (additive — --transition-* tokens above remain) */
    --duration-quick: 120ms;
    --duration-normal: 200ms;
    --duration-emphasis: 350ms;
    --duration-celebration: 500ms;

    /* Easings (named curves; existing transitions default to plain `ease`) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border widths */
    --border-width: 1px;
    --border-width-md: 2px;
    --border-width-lg: 3px;

    /* Icon sizes */
    --icon-size-sm: 1rem;     /* 16px — inline-text icons */
    --icon-size: 1.5rem;      /* 24px — default, matches existing partials */
    --icon-size-lg: 2rem;     /* 32px — feature/empty-state icons */

    /* 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);
}