/*
 * Family theme — design tokens.
 * Every colour, radius, shadow and timing used by the theme is declared here.
 * Brand overrides belong in config/theme.php ('tokens'), not in this file.
 */

:root {
    color-scheme: light;

    /* Typography */
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
    --text-hero: clamp(2.25rem, 1rem + 5vw, 4.5rem);

    /* Surfaces */
    --bg: #fff7f1;
    --bg-soft: #fdeee4;
    --surface: #ffffff;
    --surface-2: #fff3eb;
    --surface-3: #fbe6d9;
    --overlay: rgba(36, 20, 40, .48);

    /* Text */
    --text: #2a1a2e;
    --text-muted: #6f5f73;
    --text-faint: #a3959f;
    --border: rgba(42, 26, 46, .1);
    --border-strong: rgba(42, 26, 46, .2);

    /* Brand */
    --primary: #e0355a;
    --primary-hover: #c8254a;
    --primary-soft: #ffe3e9;
    --on-primary: #ffffff;
    --accent: #6d4aff;
    --accent-soft: #ece7ff;
    --sun: #ffb547;

    /* States */
    --success: #12855a;
    --success-soft: #dcf5ea;
    --warning: #a35c00;
    --warning-soft: #ffeccc;
    --danger: #cf2f35;
    --danger-soft: #ffe2e2;
    --info: #1c6dd0;
    --info-soft: #e0eeff;

    /* Shape */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    /* Depth */
    --shadow-sm: 0 1px 2px rgba(60, 25, 50, .06), 0 2px 8px rgba(60, 25, 50, .05);
    --shadow: 0 4px 12px rgba(60, 25, 50, .07), 0 16px 40px rgba(60, 25, 50, .08);
    --shadow-lg: 0 12px 28px rgba(60, 25, 50, .12), 0 36px 80px rgba(60, 25, 50, .16);
    --shadow-primary: 0 10px 28px rgba(224, 53, 90, .34);

    /* Motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: .16s;
    --dur: .28s;
    --dur-slow: .6s;

    /* Layout */
    --container: 1240px;
    --gutter: clamp(16px, 4vw, 32px);
    --header-h: 72px;
    --tabbar-h: 0px;
    --sidebar-w: 264px;

    /* Decorative gradients */
    --grad-brand: linear-gradient(135deg, #ff6b8b 0%, #e0355a 45%, #8a4dff 100%);
    --grad-warm: linear-gradient(135deg, #ffd9a8 0%, #ffb3c4 50%, #cdb9ff 100%);
    --blob-1: #ff8fa8;
    --blob-2: #a98bff;
    --blob-3: #ffc978;
}

[data-theme='dark'] {
    color-scheme: dark;

    --bg: #130e18;
    --bg-soft: #191221;
    --surface: #1d1626;
    --surface-2: #261d32;
    --surface-3: #31263f;
    --overlay: rgba(5, 3, 8, .66);

    --text: #f7eff8;
    --text-muted: #b3a5ba;
    --text-faint: #7d7085;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .2);

    --primary: #ff5f81;
    --primary-hover: #ff7d98;
    --primary-soft: rgba(255, 95, 129, .16);
    --on-primary: #2a0a14;
    --accent: #a48bff;
    --accent-soft: rgba(164, 139, 255, .17);

    --success: #4fd6a0;
    --success-soft: rgba(79, 214, 160, .15);
    --warning: #ffc261;
    --warning-soft: rgba(255, 194, 97, .15);
    --danger: #ff7b7f;
    --danger-soft: rgba(255, 123, 127, .15);
    --info: #7cb6ff;
    --info-soft: rgba(124, 182, 255, .15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
    --shadow-primary: 0 10px 30px rgba(255, 95, 129, .3);

    --grad-warm: linear-gradient(135deg, #4a2a3c 0%, #3a2452 60%, #2a2350 100%);
    --blob-1: #b8335a;
    --blob-2: #5a3fc4;
    --blob-3: #a8651f;
}

@media (max-width: 860px) {
    :root {
        --header-h: 62px;
        --tabbar-h: 66px;
    }
}