:root {
    /* =====================
       FAB GLAM POINT DESIGN SYSTEM
       Light-only, modern minimal, rich premium
    ===================== */

    /* =====================
       BRAND + CORE COLOR SYSTEM
    ===================== */
    --fg_brand: #c85f7f;
    --fg_brand_hover: #b44e6d;
    --fg_brand_active: #983c59;
    --fg_brand_soft: #ead1da;
    --fg_brand_tint: #f7edf1;
    --fg_brand_ring: rgba(200, 95, 127, 0.18);

    --fg_accent_soft: #f3e4e9;
    --fg_accent_blush: #efd7df;
    --fg_accent_rose: #d98aa3;

    --fg_canvas: #fffbfd;
    --fg_surface: #ffffff;
    --fg_surface_alt: #faf4f7;
    --fg_surface_soft: #f5ecef;
    --fg_surface_elevated: #fffefe;
    --fg_surface_inverse: #20171c;

    --fg_text_primary: #20171c;
    --fg_text_heading: #181014;
    --fg_text_secondary: #5f5158;
    --fg_text_muted: #8a7c83;
    --fg_text_disabled: #b7aab0;
    --fg_text_inverse: #ffffff;
    --fg_text_on_brand: #ffffff;

    --fg_link: var(--fg_brand);
    --fg_link_hover: var(--fg_brand_hover);

    --fg_border_soft: #efe2e7;
    --fg_border_default: #dfcfd6;
    --fg_border_strong: #cdb8c1;
    --fg_border_inverse: rgba(255, 255, 255, 0.18);

    --fg_overlay_soft: rgba(24, 16, 20, 0.08);
    --fg_overlay_default: rgba(24, 16, 20, 0.44);
    --fg_overlay_strong: rgba(24, 16, 20, 0.68);

    --fg_success: #2f7d5c;
    --fg_success_soft: #e5f3ed;
    --fg_warning: #b9772f;
    --fg_warning_soft: #f9efdf;
    --fg_error: #b6495f;
    --fg_error_soft: #f9e7eb;
    --fg_info: #466f9e;
    --fg_info_soft: #e8f0f8;

    /* =====================
       TYPOGRAPHY
    ===================== */
    --fg_font_display: "Cormorant Garamond", Georgia, serif;
    --fg_font_body: "Jost", "Segoe UI", Arial, sans-serif;
    --fg_font_ui: "Jost", "Segoe UI", Arial, sans-serif;
    --fg_font_mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --fg_text_2xs: 0.6875rem;
    --fg_text_xs: 0.75rem;
    --fg_text_sm: 0.875rem;
    --fg_text_md: 1rem;
    --fg_text_lg: 1.125rem;
    --fg_text_xl: 1.25rem;
    --fg_text_2xl: 1.5rem;
    --fg_text_3xl: 2rem;
    --fg_text_4xl: 2.75rem;
    --fg_text_5xl: 3.5rem;

    --fg_display_xs: 2.25rem;
    --fg_display_sm: 3rem;
    --fg_display_md: 4rem;
    --fg_display_lg: 4.75rem;

    --fg_weight_light: 300;
    --fg_weight_regular: 400;
    --fg_weight_medium: 500;
    --fg_weight_semibold: 600;
    --fg_weight_bold: 700;

    --fg_leading_tight: 1.1;
    --fg_leading_snug: 1.25;
    --fg_leading_normal: 1.5;
    --fg_leading_relaxed: 1.7;

    --fg_tracking_tight: 0;
    --fg_tracking_normal: 0;
    --fg_tracking_wide: 0.04em;
    --fg_tracking_wider: 0.08em;
    --fg_tracking_widest: 0.14em;

    /* =====================
       SPACING SCALE
    ===================== */
    --fg_space_0: 0;
    --fg_space_1: 0.25rem;
    --fg_space_2: 0.5rem;
    --fg_space_3: 0.75rem;
    --fg_space_4: 1rem;
    --fg_space_5: 1.25rem;
    --fg_space_6: 1.5rem;
    --fg_space_8: 2rem;
    --fg_space_10: 2.5rem;
    --fg_space_12: 3rem;
    --fg_space_14: 3.5rem;
    --fg_space_16: 4rem;
    --fg_space_20: 5rem;
    --fg_space_24: 6rem;
    --fg_space_28: 7rem;
    --fg_space_32: 8rem;

    /* =====================
       LAYOUT
    ===================== */
    --fg_container_narrow: 760px;
    --fg_container_default: 1240px;
    --fg_container_wide: 1400px;
    --fg_container_padding_mobile: 1rem;
    --fg_container_padding_tablet: 1.5rem;
    --fg_container_padding_desktop: 2rem;

    --fg_section_space_xs: 3rem;
    --fg_section_space_sm: 4rem;
    --fg_section_space_md: 5rem;
    --fg_section_space_lg: 6.5rem;
    --fg_section_space_xl: 8rem;

    --fg_header_height: 5rem;
    --fg_header_height_compact: 4.25rem;
    --fg_topbar_height: 0rem;

    --fg_grid_gap_sm: 1rem;
    --fg_grid_gap_md: 1.5rem;
    --fg_grid_gap_lg: 2rem;

    /* =====================
       BORDERS + RADII
    ===================== */
    --fg_border_width_thin: 1px;
    --fg_border_width_thick: 2px;

    --fg_radius_none: 0;
    --fg_radius_xs: 0.25rem;
    --fg_radius_sm: 0.5rem;
    --fg_radius_md: 0.75rem;
    --fg_radius_lg: 1rem;
    --fg_radius_xl: 1.5rem;
    --fg_radius_full: 9999px;

    /* =====================
       SHADOWS
    ===================== */
    --fg_shadow_xs: 0 2px 8px rgba(32, 23, 28, 0.04);
    --fg_shadow_sm: 0 8px 24px rgba(32, 23, 28, 0.06);
    --fg_shadow_md: 0 14px 38px rgba(32, 23, 28, 0.1);
    --fg_shadow_lg: 0 22px 60px rgba(32, 23, 28, 0.14);
    --fg_shadow_brand: 0 16px 40px rgba(200, 95, 127, 0.18);

    /* =====================
       MOTION
    ===================== */
    --fg_duration_fast: 0.15s;
    --fg_duration_base: 0.3s;
    --fg_duration_slow: 0.45s;

    --fg_ease_standard: ease;
    --fg_ease_emphasis: cubic-bezier(0.4, 0, 0.2, 1);
    --fg_ease_exit: cubic-bezier(0.4, 0, 1, 1);

    --fg_transition_fast: all var(--fg_duration_fast) var(--fg_ease_standard);
    --fg_transition_base: all var(--fg_duration_base) var(--fg_ease_emphasis);
    --fg_transition_slow: all var(--fg_duration_slow) var(--fg_ease_emphasis);

    /* =====================
       BUTTONS
    ===================== */
    --fg_button_height_sm: 2.5rem;
    --fg_button_height_md: 3rem;
    --fg_button_height_lg: 3.5rem;
    --fg_button_padding_x_sm: 1rem;
    --fg_button_padding_x_md: 1.25rem;
    --fg_button_padding_x_lg: 1.5rem;
    --fg_button_gap: 0.5rem;
    --fg_button_radius: var(--fg_radius_full);
    --fg_button_font_size: var(--fg_text_sm);
    --fg_button_font_weight: var(--fg_weight_medium);
    --fg_button_letter_spacing: var(--fg_tracking_wide);

    --fg_button_primary_bg: var(--fg_brand);
    --fg_button_primary_text: var(--fg_text_on_brand);
    --fg_button_primary_border: var(--fg_brand);
    --fg_button_primary_hover_bg: var(--fg_brand_hover);
    --fg_button_primary_hover_border: var(--fg_brand_hover);

    --fg_button_secondary_bg: transparent;
    --fg_button_secondary_text: var(--fg_brand);
    --fg_button_secondary_border: var(--fg_border_strong);
    --fg_button_secondary_hover_bg: var(--fg_brand_tint);
    --fg_button_secondary_hover_text: var(--fg_brand_active);
    --fg_button_secondary_hover_border: var(--fg_brand_soft);

    /* =====================
       CARDS
    ===================== */
    --fg_card_bg: var(--fg_surface);
    --fg_card_bg_alt: var(--fg_surface_alt);
    --fg_card_border: var(--fg_border_soft);
    --fg_card_radius: var(--fg_radius_lg);
    --fg_card_padding_sm: 1.25rem;
    --fg_card_padding_md: 1.5rem;
    --fg_card_padding_lg: 2rem;
    --fg_card_shadow: var(--fg_shadow_sm);
    --fg_card_shadow_hover: var(--fg_shadow_md);

    /* =====================
       FORMS
    ===================== */
    --fg_input_height: 3.25rem;
    --fg_input_padding_x: 1rem;
    --fg_input_radius: var(--fg_radius_full);
    --fg_input_bg: var(--fg_surface);
    --fg_input_text: var(--fg_text_primary);
    --fg_input_placeholder: var(--fg_text_muted);
    --fg_input_border: var(--fg_border_default);
    --fg_input_border_hover: var(--fg_border_strong);
    --fg_input_border_focus: var(--fg_brand);
    --fg_input_focus_ring: 0 0 0 4px var(--fg_brand_ring);

    /* =====================
       BADGES + PILLS
    ===================== */
    --fg_badge_height: 2rem;
    --fg_badge_padding_x: 0.875rem;
    --fg_badge_radius: var(--fg_radius_full);
    --fg_badge_bg: var(--fg_brand_tint);
    --fg_badge_text: var(--fg_brand_active);
    --fg_badge_border: transparent;

    /* =====================
       SECTION + MEDIA HELPERS
    ===================== */
    --fg_divider: var(--fg_border_soft);
    --fg_focus_outline: 0 0 0 4px var(--fg_brand_ring);
    --fg_image_radius: var(--fg_radius_lg);
    --fg_panel_radius: var(--fg_radius_xl);

    /* =====================
       Z-INDEX
    ===================== */
    --fg_z_base: 0;
    --fg_z_dropdown: 100;
    --fg_z_sticky: 200;
    --fg_z_header: 300;
    --fg_z_overlay: 400;
    --fg_z_modal: 500;
    --fg_z_toast: 600;

    /* =====================
       LEGACY VARIABLE BRIDGE
       Keep until the rest of the CSS is migrated to fg_ variables.
    ===================== */
    --color-primary: var(--fg_brand);
    --color-primary-light: var(--fg_brand_soft);
    --color-primary-dark: var(--fg_brand_active);
    --color-secondary: var(--fg_text_heading);
    --color-accent: var(--fg_accent_rose);
    --color-accent-light: var(--fg_accent_soft);

    --color-white: var(--fg_surface);
    --color-off-white: var(--fg_surface_alt);
    --color-light-gray: var(--fg_surface_soft);
    --color-mid-gray: var(--fg_border_strong);
    --color-dark-gray: var(--fg_text_secondary);
    --color-black: var(--fg_text_heading);

    --text-primary: var(--fg_text_primary);
    --text-secondary: var(--fg_text_secondary);
    --text-light: var(--fg_text_inverse);
    --text-muted: var(--fg_text_muted);
    --text-link: var(--fg_link);
    --text-link-hover: var(--fg_link_hover);
    --text-color: var(--fg_text_primary);

    --bg-site: var(--fg_canvas);
    --bg-section-alt: var(--fg_surface_alt);
    --bg-dark: var(--fg_surface_inverse);
    --bg-overlay: var(--fg_overlay_default);

    --btn-primary-bg: var(--fg_button_primary_bg);
    --btn-primary-text: var(--fg_button_primary_text);
    --btn-primary-hover-bg: var(--fg_button_primary_hover_bg);
    --btn-secondary-bg: var(--fg_button_secondary_bg);
    --btn-secondary-text: var(--fg_button_secondary_text);
    --btn-secondary-border: var(--fg_button_secondary_border);
    --btn-secondary-hover-bg: var(--fg_button_secondary_hover_bg);
    --btn-secondary-hover-text: var(--fg_button_secondary_hover_text);

    --font-primary: var(--fg_font_display);
    --font-secondary: var(--fg_font_body);
    --font-accent: var(--fg_font_ui);

    --text-xs: var(--fg_text_xs);
    --text-sm: var(--fg_text_sm);
    --text-base: var(--fg_text_md);
    --text-md: var(--fg_text_lg);
    --text-lg: var(--fg_text_xl);
    --text-xl: var(--fg_text_2xl);
    --text-2xl: var(--fg_text_3xl);
    --text-3xl: var(--fg_text_4xl);
    --text-4xl: var(--fg_text_5xl);
    --text-5xl: var(--fg_display_md);

    --font-light: var(--fg_weight_light);
    --font-regular: var(--fg_weight_regular);
    --font-medium: var(--fg_weight_medium);
    --font-semibold: var(--fg_weight_semibold);
    --font-bold: var(--fg_weight_bold);

    --leading-tight: var(--fg_leading_tight);
    --leading-snug: var(--fg_leading_snug);
    --leading-normal: var(--fg_leading_normal);
    --leading-loose: var(--fg_leading_relaxed);

    --tracking-tight: var(--fg_tracking_tight);
    --tracking-normal: var(--fg_tracking_normal);
    --tracking-wide: var(--fg_tracking_wide);
    --tracking-wider: var(--fg_tracking_wider);
    --tracking-widest: var(--fg_tracking_widest);

    --space-1: var(--fg_space_1);
    --space-2: var(--fg_space_2);
    --space-3: var(--fg_space_3);
    --space-4: var(--fg_space_4);
    --space-5: var(--fg_space_5);
    --space-6: var(--fg_space_6);
    --space-8: var(--fg_space_8);
    --space-10: var(--fg_space_10);
    --space-12: var(--fg_space_12);
    --space-16: var(--fg_space_16);
    --space-20: var(--fg_space_20);
    --space-24: var(--fg_space_24);
    --space-32: var(--fg_space_32);

    --container-max: var(--fg_container_default);
    --container-padding: var(--fg_container_padding_tablet);
    --header-height: var(--fg_header_height);
    --header-height-scroll: var(--fg_header_height_compact);

    --border-color: var(--fg_border_soft);
    --border-color-dark: var(--fg_border_strong);
    --border-width: var(--fg_border_width_thin);
    --border-width-thick: var(--fg_border_width_thick);

    --radius-sm: var(--fg_radius_xs);
    --radius-md: var(--fg_radius_sm);
    --radius-lg: var(--fg_radius_lg);
    --radius-xl: var(--fg_radius_xl);
    --radius-full: var(--fg_radius_full);
    --radius-none: var(--fg_radius_none);

    --shadow-sm: var(--fg_shadow_xs);
    --shadow-md: var(--fg_shadow_sm);
    --shadow-lg: var(--fg_shadow_md);
    --shadow-xl: var(--fg_shadow_lg);
    --shadow-pink: var(--fg_shadow_brand);

    --transition-fast: var(--fg_transition_fast);
    --transition-base: var(--fg_transition_base);
    --transition-slow: var(--fg_transition_slow);
    --transition-bounce: var(--fg_transition_base);

    --z-below: -1;
    --z-base: var(--fg_z_base);
    --z-above: 1;
    --z-dropdown: var(--fg_z_dropdown);
    --z-sticky: var(--fg_z_sticky);
    --z-header: var(--fg_z_header);
    --z-overlay: var(--fg_z_overlay);
    --z-modal: var(--fg_z_modal);
    --z-toast: var(--fg_z_toast);
}