/* ==========================================================================
   UDAY SEPTIC TANK CLEANING SERVICES
   Design Direction V2: Industrial Black & Safety Lime
   Design Tokens & Technical Variables
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Core Color Tokens - Industrial Black & Safety Lime */
  --bg-primary: #171A17;          /* Charcoal Black Primary Base */
  --bg-secondary: #222620;        /* Graphite Secondary Base */
  --bg-card: #252923;             /* Card / Surface Base */
  --bg-card-hover: #2D322B;       /* Card Active / Hover */
  --bg-surface-elevated: #2E332A;  /* Raised Components */
  --bg-surface-glass: rgba(34, 38, 32, 0.88);

  /* Safety Lime & Accent */
  --accent-lime: #B7F34A;          /* Electric Lime Green */
  --accent-lime-hover: #C9FA63;    /* Brightened Lime */
  --accent-lime-active: #9FD639;   /* Deep Lime */
  --accent-lime-dark: #1F2E0D;     /* Dark Lime Surface */
  --accent-lime-glow: rgba(183, 243, 74, 0.22);
  --accent-lime-border: rgba(183, 243, 74, 0.38);
  --accent-lime-tag: rgba(183, 243, 74, 0.12);

  /* Typography Colors */
  --text-primary: #F5F4EF;        /* Warm Off-White Primary */
  --text-secondary: #A7AAA2;      /* Muted Gray Secondary */
  --text-muted: #74786E;          /* Deep Subdued Gray */
  --text-inverse: #141713;        /* Dark text on Lime surfaces */

  /* Industrial Borders & Delimiters */
  --border-color: #393D36;        /* Primary Industrial Border */
  --border-subtle: #2C3029;       /* Muted Internal Divider */
  --border-focus: #B7F34A;        /* Interactive Accent Border */
  --border-strong: #4F544A;       /* High-contrast Technical Rim */

  /* Status Colors */
  --status-active: #B7F34A;
  --status-warning: #FFB703;
  --status-urgent: #FF5A36;
  --status-info: #5BC0BE;

  /* Typography Scales */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'Consolas', monospace;

  /* Industrial Corner Radii (Restrained, Precise, Sharp) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-none: 0px;

  /* Elevation & Technical Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-lime: 0 0 24px rgba(183, 243, 74, 0.28);
  --shadow-lime-intense: 0 0 35px rgba(183, 243, 74, 0.45);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-editorial: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Container Max Widths */
  --container-max: 1360px;
  --container-narrow: 1040px;
}

/* Technical Texture / Industrial Cross-hatch Patterns */
.tech-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(57, 61, 54, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(57, 61, 54, 0.28) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tech-stripe-hazard {
  background: repeating-linear-gradient(
    -45deg,
    #171A17,
    #171A17 12px,
    rgba(183, 243, 74, 0.15) 12px,
    rgba(183, 243, 74, 0.15) 24px
  );
}

.tech-dot-pattern {
  background-image: radial-gradient(rgba(183, 243, 74, 0.16) 1px, transparent 1px);
  background-size: 20px 20px;
}