/* ==========================================================================
   GRACE ROOFING GROUP - Base CSS
   Design tokens, reset, typography, and foundational styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts Import (Handled in functions.php)
   -------------------------------------------------------------------------- */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --charcoal: #1B1B1D;
  --offwhite: #F4F2EA;
  --brass: #C8A674;
  --brass-light: #D4B896;
  --text-primary: #F7F7F5;
  --text-secondary: #B9B5AA;

  /* HSL Color System (for opacity variants) */
  --background: 0 0% 11%;
  --foreground: 40 14% 96%;
  --card: 0 0% 11%;
  --card-foreground: 40 14% 96%;
  --primary: 40 36% 62%;
  --primary-foreground: 0 0% 11%;
  --secondary: 40 10% 92%;
  --muted: 0 0% 18%;
  --muted-foreground: 40 8% 72%;
  --accent: 40 36% 62%;
  --border: 0 0% 22%;
  --input: 0 0% 22%;
  --ring: 40 36% 62%;

  /* Border Radius */
  --radius: 1.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
  --radius-4xl: 2.5rem;

  /* Font Families */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);
  --shadow-card-lg: 0 32px 80px rgba(0, 0, 0, 0.45);
  --shadow-card-mobile: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   CSS Reset & Base Styles
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--charcoal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

/* Show default cursor on touch devices */
@media (pointer: coarse) {
  body {
    cursor: auto;
  }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-heading {
  font-family: var(--font-heading);
}

/* Heading Sizes - Enhanced Hierarchy */
.heading-xl {
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 0.3em;
}

.heading-lg {
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}

.heading-md {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.body-text {
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Label/Eyebrow Text - Improved Hierarchy */
.label-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-bottom: 16px;
  display: inline-block;
}

@media (min-width: 768px) {
  .label-mono {
    font-size: 13px;
    letter-spacing: 0.22em;
    margin-bottom: 20px;
  }
}

/* Mobile heading adjustments */
@media (max-width: 768px) {
  .heading-xl {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 0.95;
  }

  .heading-lg {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.05;
  }

  .body-text {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* --------------------------------------------------------------------------
   Color Utilities
   -------------------------------------------------------------------------- */
.bg-charcoal {
  background-color: var(--charcoal);
}

.bg-offwhite {
  background-color: var(--offwhite);
}

.bg-brass {
  background-color: var(--brass);
}

.text-brass {
  color: var(--brass);
}

.text-primary-light {
  color: var(--text-primary);
}

.text-secondary-light {
  color: var(--text-secondary);
}

.text-charcoal {
  color: var(--charcoal);
}

.text-gradient {
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Links & Buttons Base
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {

  .pill-button,
  .nav-cta,
  .nav-menu-btn,
  .menu-close-btn,
  .quick-link {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--charcoal);
}

::-webkit-scrollbar-thumb {
  background: var(--brass);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brass-light);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--brass) var(--charcoal);
}

/* --------------------------------------------------------------------------
   Text Selection
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(200, 166, 116, 0.3);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.safe-area-inset {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.will-change-transform {
  will-change: transform;
}

.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}