/**
 * Design Tokens - Generated from Figma
 * Figma File: pG1zsztms1hFTN2v7BnBfC (Orkin UK - Website Build)
 *
 * This file contains CSS custom properties extracted from Figma designs.
 * DO NOT EDIT MANUALLY - regenerate using .figma-sync/run.sh extract
 *
 * @version 1.0.1
 * @updated 2026-01-16
 */

/* ===========================================
   FONT FACE DECLARATIONS
   =========================================== */

/* Tungsten Font Family - Local files (H1-H3 headings) */
@font-face {
  font-family: "Tungsten";
  src:
    url("../fonts/tungsten/Tungsten-Medium_Web.woff2") format("woff2"),
    url("../fonts/tungsten/Tungsten-Medium_Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tungsten";
  src:
    url("../fonts/tungsten/Tungsten-Semibold_Web.woff2") format("woff2"),
    url("../fonts/tungsten/Tungsten-Semibold_Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tungsten";
  src:
    url("../fonts/tungsten/Tungsten-Bold_Web.woff2") format("woff2"),
    url("../fonts/tungsten/Tungsten-Bold_Web.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tungsten";
  src:
    url("../fonts/tungsten/Tungsten-Black_Web.woff2") format("woff2"),
    url("../fonts/tungsten/Tungsten-Black_Web.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk";
  src:
    url("../fonts/founders-grotesk/founders-grotesk-web-semibold.woff2")
      format("woff2"),
    url("../fonts/founders-grotesk/founders-grotesk-web-semibold.woff")
      format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Poppins Font Family - Google Fonts (body text, navigation) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ===========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   =========================================== */

:root {
  /* -----------------------------------------
       COLORS - Orkin Brand Palette
       ----------------------------------------- */
  --color-primary: #1282c6;
  --color-secondary: #07215b;
  --color-button-grey: #332f30;
  --color-text: #7a7a7a;
  --color-slate: #6a6b6d;
  --color-light-black: #332f30;
  --color-white: #ffffff;
  --color-red: #d70926;
  --color-hover: #443f40;
  --color-error: #d70926;
  --color-success: #28a745;

  /* -----------------------------------------
       TYPOGRAPHY - Font Families
       ----------------------------------------- */
  --font-heading: "Tungsten", Impact, "Arial Narrow Bold", sans-serif;
  --font-heading-alt:
    "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:
    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* -----------------------------------------
       TYPOGRAPHY - Headings (Tungsten)
       ----------------------------------------- */
  --h1-font-size: 96px;
  --h1-font-weight: 900;
  --h1-line-height: 1.1;
  --h1-letter-spacing: 0.02em;

  --h2-font-size: 48px;
  --h2-font-weight: 900;
  --h2-line-height: 1.15;
  --h2-letter-spacing: 0.02em;

  --h3-font-size: 32px;
  --h3-font-weight: 900;
  --h3-line-height: 1.2;
  --h3-letter-spacing: 0.01em;

  /* -----------------------------------------
       TYPOGRAPHY - Navigation (Poppins)
       ----------------------------------------- */
  --nav-font-size: 16px;
  --nav-font-weight: 700;
  --nav-line-height: 1.5em;

  /* -----------------------------------------
       TYPOGRAPHY - Topbar (Poppins)
       ----------------------------------------- */
  --topbar-font-size: 17px;
  --topbar-font-weight: 700;
  --topbar-line-height: 1.235em;

  /* -----------------------------------------
       TYPOGRAPHY - Body (Poppins)
       ----------------------------------------- */
  --body-font-size: 16px;
  --body-font-weight: 400;
  --body-line-height: 1.6;

  /* -----------------------------------------
       SPACING
       ----------------------------------------- */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* -----------------------------------------
       COMPONENT DIMENSIONS
       ----------------------------------------- */
  --topbar-height: 48px;
  --header-height: 100px;
  --logo-width: 229px;
  --logo-height: 80px;

  /* -----------------------------------------
       BUTTONS
       ----------------------------------------- */
  --button-padding: 16px 24px;
  --button-radius: 10px;
  --button-font-size: 16px;
  --button-font-weight: 600;

  /* -----------------------------------------
       BORDERS & SHADOWS
       ----------------------------------------- */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* -----------------------------------------
       TRANSITIONS
       ----------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* -----------------------------------------
       RESPONSIVE BREAKPOINTS (reference only)
       ----------------------------------------- */
  /* Tablet: 921px */
  /* Mobile: 544px */
}

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

/* Tablet */
@media (max-width: 921px) {
  :root {
    --h1-font-size: 56px;
    --h2-font-size: 40px;
    --h3-font-size: 28px;
  }
}

/* Mobile */
@media (max-width: 544px) {
  :root {
    --h1-font-size: 42px;
    --h2-font-size: 32px;
    --h3-font-size: 24px;
  }
}