/*
Theme Name: Chocolate Dev
Theme URI: https://chocolatedev.com
Author: Chocolate Dev Engineering Team
Author URI: https://chocolatedev.com
Description: Production-ready custom WordPress theme for Chocolate Dev. AI-powered software house & dedicated in-house engineering team provider for the US B2B market. Crafted with Shadcn UI design language, Vue.js reactive interactivity, GSAP 3 high-framerate animations, native llms.txt v2 Generative Engine Optimization (GEO), and 6-layer spam-proof quote management system.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: chocolatedev
License: Proprietary
*/

/* ==========================================================================
   SHADCN UI DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */
:root {
  /* Shadcn Dark Core HSL Tokens (Enterprise Palantir / Nvidia Standard) */
  --background: 240 10% 3.9%;          /* #09090b */
  --foreground: 0 0% 98%;              /* #fafafa */
  --card: 240 10% 4.8%;                /* #121215 */
  --card-surface: #141418;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 221.2 100% 60%;          /* #3b82f6 - Radiant Electric Blue */
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3.7% 15.9%;        /* #27272a */
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;            /* #18181b */
  --muted-foreground: 240 5% 64.9%;   /* #a1a1aa */
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;       /* #7f1d1d */
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;           /* #27272a */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --input: 240 3.7% 15.9%;            /* #18181b */
  --ring: 221.2 100% 60%;
  --radius: 0.875rem;                 /* 14px */

  /* Direct Hex Values for Performance & Ease */
  --cd-zinc-50: #fafafa;
  --cd-zinc-100: #f4f4f5;
  --cd-zinc-200: #e4e4e7;
  --cd-zinc-300: #d4d4d8;
  --cd-zinc-400: #a1a1aa;
  --cd-zinc-500: #71717a;
  --cd-zinc-600: #52525b;
  --cd-zinc-700: #3f3f46;
  --cd-zinc-800: #27272a;
  --cd-zinc-900: #18181b;
  --cd-zinc-950: #09090b;
  --cd-black: #000000;

  --cd-blue-500: #3b82f6;
  --cd-blue-600: #2563eb;
  --cd-blue-glow: rgba(59, 130, 246, 0.18);

  --cd-emerald-500: #10b981;
  --cd-emerald-950: #022c22;
  --cd-violet-500: #8b5cf6;
  --cd-amber-500: #f59e0b;

  /* Chart Color Tokens (Official Shadcn Spec) */
  --chart-1: #3b82f6;
  --chart-2: #10b981;
  --chart-3: #8b5cf6;
  --chart-4: #f59e0b;
  --chart-5: #ef4444;

  /* Typography */
  --cd-font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cd-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cd-font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cd-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Elevation Shadows (Shadcn Specs) */
  --cd-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --cd-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --cd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
  --cd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
  --cd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

  /* Container and Layout Standards */
  --cd-container-max: 1440px;

  /* Hero Dimension Tokens */
  --hero-art-h: clamp(140px, 16vw, 240px);
  --hero-pad-top: clamp(135px, 15vw, 205px);
  --hero-pad-bottom: clamp(36px, 4vh, 60px);
}

/* ==========================================================================
   RESETS & GLOBAL NORMALIZE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #000000 !important;
  color: #fafafa !important;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000000 !important;
  color: #fafafa !important;
  font-family: var(--cd-font-primary);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

[v-cloak] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Accessibility Skip Link */
.cd-skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--cd-zinc-950);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  z-index: 99999;
  transition: top 0.2s ease;
}

.cd-skip-link:focus {
  top: 20px;
}

/* Zero Gap Main Element Standard */
main#main-content {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Responsive Table Wrapper */
.cd-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  border: 1px solid var(--cd-zinc-200);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--cd-shadow-xs);
}