/* Premiere Office Movers - design tokens (colors, type, spacing) */

:root {
  /* Typography - Header */
  --typeHeaderPrimary: 'Poppins', sans-serif;
  --typeHeaderFallback: sans-serif;
  --typeHeaderSize: 35px;
  --typeHeaderWeight: 700;
  --typeHeaderLineHeight: 1.2;
  --typeHeaderSpacing: 0;
  
  /* Typography - Base */
  --typeBasePrimary: 'Jost', sans-serif;
  --typeBaseFallback: sans-serif;
  --typeBaseSize: 17px;
  --typeBaseWeight: 400;
  --typeBaseLineHeight: 1.6;
  --typeBaseSpacing: 0.025em;
  
  /* Typography - Navigation (match premiereofficefurniture.ca Globo menu) */
  --typeNavigationPrimary: 'Work Sans', sans-serif;
  --typeNavigationFallback: sans-serif;
  --typeNavigationSize: 18px;
  --typeNavigationWeight: 300;
  --typeNavigationLineHeight: 65px;
  --typeNavigationStyle: true;
  
  /* Color Scheme */
  /* Primary Colors */
  --colorBody: #ffffff;
  --colorBodyDim: #f2f2f2;
  --colorBodyLightDim: #fafafa;
  --colorBodyMediumDim: #f5f5f5;
  --colorBodyAlpha05: rgba(255, 255, 255, 0.05);
  
  /* Text Colors */
  --colorTextBody: #1c1d1d;
  --colorTextBodyAlpha0025: rgba(28, 29, 29, 0.025);
  --colorTextBodyAlpha005: rgba(28, 29, 29, 0.05);
  --colorTextBodyAlpha008: rgba(28, 29, 29, 0.08);
  --colorTextBodyAlpha01: rgba(28, 29, 29, 0.1);
  --colorTextBodyAlpha035: rgba(28, 29, 29, 0.35);
  --colorLink: #1c1d1d;
  
  /* Border Colors */
  --colorBorder: #e8e8e1;

  /* Brand accent (Première gold) - use these instead of hardcoding hex */
  --colorAccent: #fab746;
  --colorAccentRgb: 250, 183, 70;
  --colorAccentHover: #e6a035;
  --colorAccentDeep: #e29a22;
  --colorAccentLight: #f9d071;
  --colorAccentText: #d4941f;
  --colorAccentTextHover: #b87d15;
  --colorAccentSoft: #f3eee4;

  /* Neutrals used across forms, cards, and muted copy */
  --colorBlack: #000000;
  --colorTextMuted: #666666;
  --colorTextMutedStrong: #333333;
  --colorTextDisabled: #444444;
  --colorSurfaceMuted: #f9f9f9;
  --colorSurfaceSoft: #f8f8f8;
  --colorSurfaceDisabled: #f6f6f6;
  --colorBorderMuted: #e0e0e0;
  
  /* Button Colors */
  --colorBtnPrimary: #111111;
  --colorBtnPrimaryDim: #0c0c0c;
  --colorBtnPrimaryText: #ffffff;
  
  /* Header/Navigation Colors */
  --colorNav: #090909;
  --colorNavText: #ffffff;
  
  /* Footer Colors */
  --colorFooter: #111111;
  --colorFooterText: #ffffff;
  --colorFooterTextAlpha01: rgba(255, 255, 255, 0.1);
  --colorFooterTextAlpha012: rgba(255, 255, 255, 0.12);
  --colorFooterTextAlpha06: rgba(255, 255, 255, 0.6);
  
  /* Announcement Bar */
  --colorAnnouncement: #1c1d1d;
  --colorAnnouncementText: #ffffff;
  
  /* Hero/Image Text */
  --colorHeroText: #ffffff;
  
  /* Input Fields */
  --colorInputBg: #ffffff;
  --colorInputBgDim: #f2f2f2;
  --colorInputBgDark: #e6e6e6;
  --colorInputText: #1c1d1d;
  
  /* Overlays */
  --colorModalBg: #e8e8e1;
  
  /* Drawer/Mobile Menu */
  --colorDrawers: #111111;
  --colorDrawersDim: #0c0c0c;
  --colorDrawerBorder: #e8e8e1;
  --colorDrawerText: #e8e8e1;
  --colorDrawerTextDarken: #c3c3bc;
  --colorDrawerButton: #111111;
  --colorDrawerButtonText: #ffffff;
  
  /* Image Backgrounds */
  --colorSmallImageBg: #ffffff;
  --colorLargeImageBg: #111111;
  
  /* Icon Settings */
  --iconWeight: 2px;
  --iconLinecaps: miter;
  
  /* Spacing */
  --spacingSection: 60px;
  --spacingSectionMobile: 40px;
  --spacingSubsection: 30px;
  --spacingSubsectionMobile: 20px;
  
  /* Layout */
  --pageWidth: 1200px;
  --gridGutter: 20px;
  --gridGutterMobile: 15px;
  /* Primary header uses position:absolute; reserve this space on inner pages */
  --siteHeaderHeight: 160.4px; /* match premiereofficefurniture.ca desktop header */
  /* Contact page map: synced to Get in touch panel height via contact-inquiry.js */
  --contactMapHeight: 480px;
  
  /* Border Radius */
  --radiusButton: 0;
  --radiusInput: 0;
  
  /* Transitions */
  --transitionDuration: 0.3s;
  --transitionEase: ease;
  
  /* Z-index - drawer must sit above overlay so menu stays clickable */
  --zIndexHeader: 90;
  --zIndexOverlay: 105;
  --zIndexDrawer: 110;
  --zIndexModal: 120;
}

/* Media Query Breakpoints */
@custom-media --mobile (max-width: 589px);
@custom-media --tablet-down (max-width: 768px);
@custom-media --desktop (min-width: 769px);
@custom-media --widescreen (min-width: 1200px);