/*
Theme Name: Kausar.Build Portfolio
Theme URI: https://kausar.build/
Author: Kausar.Build
Author URI: https://kausar.build/
Description: A precision-crafted, responsive WordPress theme for design engineers, UI architects, and creative builders. Clean editorial layout with fully editable Customizer panels, Custom Post Types (Projects, Services, Testimonials, Booking Services), interactive ID badge physics, and a consultation booking wizard.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-build
Tags: portfolio, grid-layout, one-column, custom-colors, custom-menu, featured-images, theme-options, translation-ready
*/

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-handwriting: 'Caveat', cursive;
  
  --color-canvas: #FAF9F6;
  --color-card-bg: #FFFFFF;
  --color-text-main: #121212;
  --color-text-muted: #6B7280;
  --color-text-subtle: #9CA3AF;
  --color-border: #E5E7EB;
  --color-border-subtle: rgba(229, 231, 235, 0.8);
  --color-accent-orange: #E8590C;
  --color-accent-green: #2B8A3E;
  
  --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
  --shadow-lanyard: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--color-canvas);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-canvas);
  color: var(--color-text-main);
  overflow-x: hidden;
}

.bg-grid-dots {
  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
  background-size: 24px 24px;
}

.lanyard-strap {
  background: repeating-linear-gradient(
    45deg,
    #1e1e1e,
    #1e1e1e 8px,
    #2a2a2a 8px,
    #2a2a2a 16px
  );
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 14s linear infinite;
}