/* ============================================================================
   PEST CARE INDIA SOLUTIONS — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for colour, typography, spacing, radii and shadows.
   Values are taken directly from the Volume-1 specification. Never hardcode
   these values elsewhere — always reference the custom property.
   ============================================================================ */

:root {
    /* ---------------------------------------------------------------------
       1. COLOUR SYSTEM  (derived from the company logo)
       --------------------------------------------------------------------- */
    --color-primary: #005AA9;          /* Logo Blue — buttons, headings, nav, icons, CTA */
    --color-primary-dark: #004a8c;     /* Pressed/active blue */
    --color-accent: #9CD44E;           /* Accent Green — buttons, highlights, stats */
    --color-accent-dark: #8bc23f;      /* Hover green */
    --color-navy: #10304A;             /* Dark Navy — footer, top bar, hero overlay */
    --color-navy-deep: #0B2335;        /* Copyright bar (slightly darker navy) */

    --color-white: #FFFFFF;            /* Primary page background */
    --color-smoke: #F7F9FB;            /* Light Smoke — alternate section background */

    --color-text: #222222;             /* Body content */
    --color-text-secondary: #6B7280;   /* Supporting copy & descriptions */
    --color-border: #E5E7EB;           /* Cards, inputs, dividers */

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* Tints (kept consistent so we never invent new colours) */
    --color-primary-tint: rgba(0, 90, 169, 0.08);   /* very light blue — icon circles, badges */
    --color-primary-tint-strong: rgba(0, 90, 169, 0.14);
    --color-accent-tint: rgba(156, 212, 78, 0.16);
    --color-navy-tint: rgba(16, 48, 74, 0.92);       /* hero overlay base */

    /* ---------------------------------------------------------------------
       2. TYPOGRAPHY
       --------------------------------------------------------------------- */
    --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Heading scale (desktop defaults; responsive.css steps these down) */
    --h1-size: 60px;
    --h2-size: 46px;
    --h3-size: 32px;
    --h4-size: 26px;
    --body-size: 18px;

    --line-height-base: 1.7;
    --line-height-heading: 1.18;
    --measure: 700px;                  /* max paragraph width for readability */

    /* ---------------------------------------------------------------------
       3. LAYOUT / GRID
       --------------------------------------------------------------------- */
    --container-xl: 1320px;
    --container-desktop: 1200px;
    --container-laptop: 1140px;
    --container-tablet: 960px;

    --section-space: 120px;            /* desktop top/bottom — responsive overrides */
    --card-padding: 32px;              /* desktop — responsive overrides */
    --gutter: 32px;                    /* column spacing — responsive overrides */
    --header-pad-x: 80px;              /* horizontal padding for top bar & nav */

    /* ---------------------------------------------------------------------
       4. BORDER RADIUS SYSTEM
       --------------------------------------------------------------------- */
    --radius-button: 12px;
    --radius-input: 12px;
    --radius-card: 20px;
    --radius-card-lg: 24px;
    --radius-image: 20px;
    --radius-popup: 24px;
    --radius-mega: 20px;
    --radius-pill: 999px;

    /* ---------------------------------------------------------------------
       5. SHADOW SYSTEM
       --------------------------------------------------------------------- */
    --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-card-sm: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-card-md: 0 18px 40px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.12);
    --shadow-mega: 0 30px 70px rgba(0, 0, 0, 0.12);
    --shadow-popup: 0 30px 70px rgba(0, 0, 0, 0.15);
    --shadow-float: 0 10px 25px rgba(0, 0, 0, 0.20);
    --shadow-cta-glow: 0 10px 30px rgba(0, 90, 169, 0.25);

    /* ---------------------------------------------------------------------
       6. MOTION
       --------------------------------------------------------------------- */
    --transition-base: 0.3s ease;
    --transition-fast: 0.25s ease;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------------------------------------------------------------------
       7. COMPONENT SIZING
       --------------------------------------------------------------------- */
    --btn-height: 54px;
    --btn-height-sm: 52px;             /* header Book Inspection button */
    --input-height: 56px;
    --topbar-height: 40px;
    --nav-height: 90px;
    --nav-height-sticky: 72px;
    --icon-box: 60px;                  /* feature/section icon circle */
    --icon-box-sm: 48px;               /* inline / menu icons */
    --float-btn: 60px;
    --z-header: 1000;
    --z-drawer: 1100;
    --z-popup: 1200;
    --z-float: 900;
    --z-loader: 1300;
}