@font-face {
    font-family: "Paris2024";
    src: local("Paris2024"), local("Paris 2024");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Approved Beulah brand tokens */
    --brand-primary: #0745AB;
    --brand-primary-strong: #053483;
    --brand-primary-soft: #E9F0FF;
    --brand-primary-ghost: rgba(7, 69, 171, .08);
    --brand-gold: #CB9B2E;
    --brand-gold-strong: #B0821F;
    --brand-gold-soft: #F7EBCB;
    --brand-gold-ghost: rgba(203, 155, 46, .12);
    --brand-white: #FFFFFF;
    --brand-black: #000000;

    /* Semantic UI colors */
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F5F8FF;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EDF3FF;
    --color-surface-muted: #F7F9FC;
    --color-surface-strong: #0A1830;
    --color-text: #0C1630;
    --color-text-strong: #000000;
    --color-text-muted: #52607A;
    --color-text-faint: #7E8BA3;
    --color-border: #D6E0F0;
    --color-border-strong: #B6C6E2;
    --color-focus: rgba(7, 69, 171, .28);
    --color-success: #0E8F5B;
    --color-warning: #B7791F;
    --color-danger: #C7342C;
    --color-info: #0745AB;

    /* Typography */
    --font-brand: "Paris2024", "Inter", "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: var(--font-brand);
    --font-heading: var(--font-brand);
    --font-label: var(--font-brand);

    --font-size-xs: .72rem;
    --font-size-sm: .84rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.32rem, 1.8vw, 1.72rem);
    --font-size-2xl: clamp(1.62rem, 2.4vw, 2.28rem);
    --font-size-3xl: clamp(2.1rem, 3.8vw, 3.42rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 88px;
    --space-10: 120px;

    /* Layout */
    --layout-reading: 760px;
    --layout-content: 1240px;
    --layout-wide: 1360px;

    /* Radii */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(10, 24, 48, .06);
    --shadow-sm: 0 10px 24px rgba(10, 24, 48, .08);
    --shadow-md: 0 18px 42px rgba(10, 24, 48, .1);
    --shadow-lg: 0 26px 72px rgba(10, 24, 48, .14);
    --shadow-dark: 0 30px 80px rgba(0, 0, 0, .22);

    /* Motion */
    --motion-fast: 140ms ease;
    --motion-base: 220ms ease;
    --motion-slow: 320ms ease;

    /* Layering */
    --z-base: 1;
    --z-header: 30;
    --z-dropdown: 60;
    --z-sticky: 80;
    --z-overlay: 120;
    --z-chat: 140;
}