/*
 * Olive Grove design tokens.
 * Mirrors the iOS app's DesignSystem (Color+Theme.swift, Font+Theme.swift,
 * Spacing.swift, Radius.swift) so the site and the app stay in step.
 */

:root {
    color-scheme: light dark;

    /* Surfaces */
    --canvas: #F3F1E9;          /* bnCanvas – linen */
    --surface: #FCFBF7;         /* bnSurface – page */
    --surface-raised: #FCFBF7;  /* bnSurfaceRaised */
    --surface-sunken: #E8E5DA;  /* bnSurfaceSunken */
    --hairline: #DCD7C8;        /* bnHairline */

    /* Text */
    --ink: #22261D;             /* bnInk */
    --ink-2: #565C4C;           /* bnInkSecondary */

    /* Brand */
    --brand: #4B5D33;           /* bnBrand – olive */
    --brand-fill: #4B5D33;      /* bnBrandFill */
    --on-brand-fill: #FFFFFF;
    --brand-tint: #E4E9D8;      /* bnBrandTint */
    --scripture: #9A4A27;       /* bnScripture – clay */
    --scripture-tint: #F5E6DA;  /* bnScriptureTint */
    --ornament: #B7643C;        /* bnOrnament – rules and quote marks */

    /* Illustration palette */
    --leaf: #6E8048;
    --leaf-light: #8A9A63;
    --olive-fruit: #3E4A28;
    --illo-page: #FCFBF7;
    --illo-line: #C9D2B6;

    /* Status */
    --success: #3F6B3A;
    --warning: #8A560F;
    --error: #A0352B;

    /* Elevation */
    --shadow-card: 0 6px 24px rgb(0 0 0 / 0.07);
    --shadow-lift: 0 24px 60px -18px rgb(34 38 29 / 0.28);
    --shadow-phone: 0 40px 80px -30px rgb(34 38 29 / 0.45), 0 12px 30px -12px rgb(34 38 29 / 0.25);
    --glass: rgb(252 251 247 / 0.72);

    /* Type */
    --font-serif: "Source Serif 4", "New York", ui-serif, Georgia, serif;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
    --text-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
    --text-scripture: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
    --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --text-body: 1.0625rem;
    --text-label: 0.8125rem;

    /* Spacing – 4pt grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --section-y: clamp(72px, 6vw + 40px, 144px);
    --gutter: clamp(16px, 4vw, 40px);
    --max-width: 1200px;

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-reveal: 900ms;
}

/* Grove at night */
@media (prefers-color-scheme: dark) {
    :root {
        --canvas: #12140E;
        --surface: #1C1F17;
        --surface-raised: #343A2C;
        --surface-sunken: #1F231A;
        --hairline: #30352A;

        --ink: #EAE8DC;
        --ink-2: #B1B3A2;

        --brand: #B0C28E;
        --brand-fill: #566B31;
        --brand-tint: #262C1D;
        --scripture: #E49B74;
        --scripture-tint: #2D2119;
        --ornament: #D98B62;

        --leaf: #8FA166;
        --leaf-light: #6F8050;
        --olive-fruit: #C9D6A8;
        --illo-page: #23271D;
        --illo-line: #3E4632;

        --success: #9CC98F;
        --warning: #E2B062;
        --error: #EE9086;

        --shadow-card: 0 6px 24px rgb(0 0 0 / 0.28);
        --shadow-lift: 0 24px 60px -18px rgb(0 0 0 / 0.6);
        --shadow-phone: 0 40px 80px -30px rgb(0 0 0 / 0.8), 0 12px 30px -12px rgb(0 0 0 / 0.5);
        --glass: rgb(28 31 23 / 0.72);
    }
}