/**
 * Grosvenor Flooring Design Tokens
 * 
 * Canonical CSS variables extracted from Flatsome theme_mods.
 * Import this file FIRST in any new feature CSS.
 * 
 * @see /docs/style-guide.md for full documentation
 * @version 1.1.0
 * @since 2026-01-07
 * @source Flatsome theme_mods (flatsome-child theme)
 */

:root {
  /* ===== PRIMARY BRAND COLORS (from Flatsome) ===== */
  --gf-gold: #edbe00;                    /* color_secondary - Primary CTA, buttons, badges */
  --gf-gold-alt: #eebf01;                /* color_checkout, color_new_bubble, color_review */
  --gf-gold-hover: #d4a903;              /* Gold hover state (darkened) */
  --gf-gold-light: #fffdf5;              /* Gold tinted background */
  
  /* ===== NEUTRAL COLORS (from Flatsome) ===== */
  --gf-header-bg: #3e3e3f;               /* header_bg, topbar_bg, nav_position_bg */
  --gf-primary-text: #444444;            /* color_primary, color_links */
  --gf-body-text: #4C4C4C;               /* color_texts */
  --gf-link-hover: #a5a5a5;              /* color_links_hover */
  --gf-widget-link-hover: #9e9e9e;       /* color_widget_links_hover */
  --gf-divider: #898989;                 /* color_divider */
  --gf-mobile-overlay: #5e5e5e;          /* mobile_overlay_bg */
  --gf-footer-dark: #0a0a0a;             /* footer_bottom_color */
  --gf-border: #dddddd;                  /* Borders, dividers */
  --gf-border-light: #eeeeee;            /* Light borders */
  --gf-bg-light: #f8f9fa;                /* Light backgrounds */
  --gf-bg-off-white: #ededed;            /* Page background, icon list bg */
  --gf-white: #ffffff;                   /* Cards, inputs, footer_1_bg_color */
  
  /* ===== SEMANTIC COLORS ===== */
  --gf-sale: #dd3333;                    /* color_sale - Sale badges, crossed prices */
  --gf-success: #5cb85c;                 /* Success messages, positive actions */
  --gf-success-hover: #449d44;
  --gf-error: #dc3545;                   /* Errors, delete buttons */
  --gf-error-hover: #c82333;
  --gf-whatsapp: #25d366;                /* WhatsApp buttons */
  --gf-whatsapp-hover: #128c7e;
  
  /* ===== HEADER/NAV COLORS (from Flatsome) ===== */
  --gf-nav-text: #ffffff;                /* type_nav_color, type_nav_bottom_color */
  --gf-nav-text-hover: #bfbebe;          /* type_nav_color_hover */
  --gf-header-icons: #ffffff;            /* header_icons_color */
  --gf-header-icons-hover: #e5e5e5;      /* header_icons_color_hover */
  
  /* ===== GROSVENOR+ PREMIUM (for member features) ===== */
  --gf-premium-green: #1a4d2e;           /* Premium/member features primary */
  --gf-premium-green-light: #2d6a4f;     /* Premium features hover */
  --gf-warm-secondary: #d4a373;          /* Warm accent for AI features */
  --gf-warm-accent: #e9c46a;             /* Highlight accent */
  
  /* ===== TYPOGRAPHY (from Flatsome) ===== */
  --gf-font-heading: 'Hind', sans-serif; /* type_headings: Hind 500 */
  --gf-font-body: 'Hind', sans-serif;    /* type_texts: Hind 400 */
  --gf-font-nav: 'Hind', sans-serif;     /* type_nav: Hind 300 */
  --gf-font-alt: 'Barlow', sans-serif;   /* type_alt: Barlow 400 */
  --gf-font-weight-heading: 500;
  --gf-font-weight-body: 400;
  --gf-font-weight-nav: 300;
  --gf-font-size-base: 85%;              /* type_size */
  --gf-font-size-mobile: 90%;            /* type_size_mobile */
  
  /* ===== SPACING SCALE ===== */
  --gf-space-xs: 5px;
  --gf-space-sm: 10px;
  --gf-space-md: 15px;
  --gf-space-lg: 20px;
  --gf-space-xl: 30px;
  --gf-space-2xl: 40px;
  
  /* ===== BORDER RADIUS (from Flatsome) ===== */
  --gf-radius-none: 0;                   /* dropdown_radius */
  --gf-radius-sm: 4px;                   /* Inputs, small elements */
  --gf-radius-md: 8px;                   /* Cards, modals */
  --gf-radius-lg: 10px;                  /* button_radius - Buttons, badges */
  --gf-radius-xl: 12px;                  /* Feature cards, modern elements */
  --gf-radius-round: 50%;                /* Circular elements */
  
  /* ===== HEADER DIMENSIONS (from Flatsome) ===== */
  --gf-header-height: 60px;              /* header_height */
  --gf-header-height-sticky: 53px;       /* header_height_sticky */
  --gf-topbar-height: 23px;              /* header_top_height */
  --gf-nav-height: 36px;                 /* nav_height */
  --gf-nav-height-bottom: 25px;          /* nav_height_bottom */
  --gf-cart-drawer-width: 360px;         /* cart_drawer_width */
  
  /* ===== SHADOWS ===== */
  --gf-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --gf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --gf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --gf-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.2);
  
  /* ===== TRANSITIONS ===== */
  --gf-transition-fast: 0.15s ease;
  --gf-transition-normal: 0.2s ease;
  --gf-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX SCALE ===== */
  --gf-z-dropdown: 100;
  --gf-z-sticky: 500;
  --gf-z-modal-backdrop: 9998;
  --gf-z-modal: 9999;
  --gf-z-toast: 10000;
}