/*
Theme Name: Uttam Aron Portfolio Theme
Theme URI: https://uttamaron.com/
Author: Uttam Aron
Author URI: https://uttamaron.com/
Description: Bespoke WordPress theme for Uttam Aron. Clean, editorial, technology-aware design supporting 4 professional identities (Writer, Graphic Designer, Journalist, Web Developer) and 4 software products (DeskClock, PrintFlow, TimeBack, Upscal Studio).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: uttam-aron-portfolio-theme
*/

/* ==========================================================================
   LOCKED DESIGN TOKENS (Master Spec Section 4)
   ========================================================================== */
:root {
  --ua-bg: #F7F7F5;
  --ua-surface: #FFFFFF;
  --ua-text: #111318;
  --ua-text-secondary: #5F6368;
  --ua-primary: #172A46;
  --ua-accent: #00A8D6;
  --ua-border: #E2E4E7;

  /* Typography */
  --ua-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ua-font-bn: 'Noto Sans Bengali', sans-serif;
  --ua-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --ua-space-xs: 4px;
  --ua-space-sm: 8px;
  --ua-space-md: 16px;
  --ua-space-lg: 24px;
  --ua-space-xl: 40px;
  --ua-space-2xl: 64px;

  /* Container */
  --ua-container-max: 1200px;
  --ua-radius-sm: 6px;
  --ua-radius-md: 12px;
  --ua-radius-lg: 18px;
  --ua-shadow-sm: 0 1px 3px rgba(17, 19, 24, 0.05);
  --ua-shadow-md: 0 4px 12px rgba(17, 19, 24, 0.07);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--ua-bg);
  color: var(--ua-text);
  font-family: var(--ua-font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ua-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ua-primary);
}

.ua-container {
  width: 100%;
  max-width: var(--ua-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Global Mobile Viewport Constraint */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Baseline Off-Canvas Mobile Drawer Safety (Never render unstyled inline) */
.ua-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 320px);
  height: 100vh;
  background: #ffffff;
  z-index: 999999;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ua-mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible !important;
}

.ua-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ua-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto;
}

/* Baseline Footer Dark Theme */
.ua-site-footer {
  background-color: #0f172a;
  color: #94a3b8;
  padding: 60px 0 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}