:root {
    /* =========================================
       COLORS — THE ADS AND FUNNEL DESIGN SYSTEM
       Global palette: Charcoal, White, Lime
       ========================================= */

    /* Primary brand */
    --bcc-color-primary: #171717;
    --bcc-color-primary-dark: #080808;

    /* Accent — Lime Green */
    --bcc-color-accent: #A6CE39;
    --bcc-color-accent-hover: #91B92B;

    /* Additional accent shades */
    --bcc-color-accent-light: #F1F7E3;
    --bcc-color-accent-muted: #E4EFC8;
    --bcc-color-accent-dark: #64851C;

    /* Typography */
    --bcc-color-text: #171717;
    --bcc-color-text-muted: #666666;

    /* Surfaces */
    --bcc-color-background: #F7F8F3;
    --bcc-color-surface: #FFFFFF;
    --bcc-color-border: #E2E6D9;

    /* Additional surfaces */
    --bcc-color-surface-muted: #F1F3EC;
    --bcc-color-overlay: rgba(0, 0, 0, 0.58);
    --bcc-color-glass: rgba(255, 255, 255, 0.90);

    /* =========================================
       LAYOUT
       ========================================= */

    --bcc-container-width: 1440px;

    --bcc-container-padding-desktop: 40px;
    --bcc-container-padding-tablet: 28px;
    --bcc-container-padding-mobile: 18px;

    /* =========================================
       SPACING
       ========================================= */

    --bcc-space-1: 4px;
    --bcc-space-2: 8px;
    --bcc-space-3: 12px;
    --bcc-space-4: 16px;
    --bcc-space-5: 24px;
    --bcc-space-6: 32px;
    --bcc-space-7: 40px;
    --bcc-space-8: 48px;
    --bcc-space-9: 64px;
    --bcc-space-10: 80px;
    --bcc-space-11: 96px;
    --bcc-space-12: 120px;

    /* =========================================
       TYPOGRAPHY
       ========================================= */

    /*
     * Saans is the reference typeface.
     * It must be installed using licensed font files.
     * Until loaded, Inter and system sans-serif fonts
     * act as fallbacks.
     */

    --bcc-font-body: "Saans", "Inter", Arial, sans-serif;
    --bcc-font-heading: "Saans", "Inter", Arial, sans-serif;
    --bcc-font-numbers: "Saans", "Inter", Arial, sans-serif;

    --bcc-text-xs: 12px;
    --bcc-text-sm: 14px;
    --bcc-text-base: 16px;
    --bcc-text-lg: 18px;
    --bcc-text-xl: 20px;
    --bcc-text-2xl: 24px;
    --bcc-text-3xl: 32px;
    --bcc-text-4xl: 48px;
    --bcc-text-5xl: 64px;
    --bcc-text-6xl: 80px;
    --bcc-text-7xl: 104px;

    /* =========================================
       FONT WEIGHTS
       ========================================= */

    --bcc-weight-regular: 400;
    --bcc-weight-medium: 500;
    --bcc-weight-semibold: 600;
    --bcc-weight-bold: 700;

    /* =========================================
       LINE HEIGHTS
       ========================================= */

    --bcc-leading-tight: 0.98;
    --bcc-leading-snug: 1.1;
    --bcc-leading-normal: 1.4;
    --bcc-leading-relaxed: 1.65;

    /* =========================================
       LETTER SPACING
       ========================================= */

    --bcc-tracking-tight: -0.055em;
    --bcc-tracking-heading: -0.065em;
    --bcc-tracking-normal: -0.02em;
    --bcc-tracking-wide: 0.02em;

    /* =========================================
       BORDERS AND RADII
       ========================================= */

    --bcc-border-width: 1px;

    --bcc-border-radius-sm: 6px;
    --bcc-border-radius-md: 12px;
    --bcc-border-radius-lg: 20px;
    --bcc-border-radius-pill: 999px;

    /* =========================================
       SHADOWS
       ========================================= */

    --bcc-shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.04);
    --bcc-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.06);
    --bcc-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.10);

    /* Lime accent shadows */
    --bcc-shadow-accent: 0 6px 20px rgba(166, 206, 57, 0.18);

    /* =========================================
       TRANSITIONS
       ========================================= */

    --bcc-transition-fast: 150ms ease;
    --bcc-transition-base: 200ms ease;
    --bcc-transition-slow: 300ms ease;
}