/* ==========================================================================
   Design Tokens (semantic variables)
   These map to WP theme.json presets (generated by WordPress).
   Tailwind should use these semantic vars, not raw hex values.
   ========================================================================== */

   :root {
    /* ==========================================================================
    Brand
    ========================================================================== */
    --color-brand-primary: #0564FF;
    --color-brand-primary-hover: #0452D9;
    --color-brand-primary-light: rgba(5, 100, 255, 0.1);
    --color-brand-accent: #00A63E;
    --color-brand-accent-hover: #008A34;

    /* RGB versions for Tailwind opacity modifiers */
    --color-brand-primary-rgb: 5 100 255;
    --color-brand-primary-hover-rgb: 4 82 217;
    --color-brand-accent-rgb: 0 166 62;
    --color-brand-accent-hover-rgb: 0 138 52;

    /* ==========================================================================
    Surfaces
    ========================================================================== */
    --color-bg: #F3F1ED;
    --color-bg-off: #FFFFFF;
    --color-bg-header: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-muted: #E8E6E2;
    --color-surface-inverse: #101828;

    /* Optional: card surfaces (handy in components) */
    --color-card: #FFFFFF;
    --color-card-inverse: #101828;

    /* ==========================================================================
    Text
    ========================================================================== */
    --color-text: #101828;
    --color-text-muted: #6B7280;
    --color-text-inverse: #FFFFFF;

    /* Links + focus */
    --color-link: var(--color-brand-primary);
    --color-link-hover: var(--color-brand-primary-hover);
    --color-focus: var(--color-brand-primary);

    /* ==========================================================================
    Borders
    ========================================================================== */
    --color-border: #E5E7EB;
    --color-border-strong: #9CA3AF;

    /* ==========================================================================
    States
    ========================================================================== */
    --color-success: #00A63E;
    --color-success-hover: #008A34;

    --color-warning: #FDC700;
    --color-warning-hover: #E6B300;

    --color-danger: #DC2626;
    --color-danger-hover: #B91C1C;

    /* ==========================================================================
    Typography
    ========================================================================== */
    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

    /* Font sizes (keep as real values; Tailwind can consume these) */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-base: 18px;
    --text-lg: 20px;
    --text-h5: 22px;
    --text-h4: 24px;
    --text-h3: 32px;
    --text-h2: 40px;
    --text-h1: 48px;
    --text-display: 64px;

    /* Line heights */
    --leading-tight: 1.15;
    --leading-snug: 1.25;
    --leading-normal: 1.5;

    /* Weights */
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ==========================================================================
    Spacing (strongly recommended to include here too)
    ========================================================================== */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ==========================================================================
    Radius
    ========================================================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ==========================================================================
    Shadows
    ========================================================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);

    /* ==========================================================================
    Motion
    ========================================================================== */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ==========================================================================
    Layout
    ========================================================================== */
    --container-max: 82rem;
    /* 1312px / content width */
    --max-w-content: 82rem;
    --max-w-prose: calc(82rem / 12 * 8);
    /* 880px */
    --container-md: calc(82rem / 12 * 8);
    /* 960px */
}