/* ============================================================
   AppSeed design tokens + shared component styles.
   Single source of truth — every page links this file.
   Page-specific styles live in assets/css/page-<name>.css
   ============================================================ */

:root {
  --c-primary: 183 0 83; --c-on-primary: 255 255 255; --c-primary-container: 224 23 106;
  --c-secondary: 75 65 225; --c-on-secondary: 255 255 255;
  --c-surface: 255 255 255; --c-surface-dim: 252 248 249;
  --c-surface-container: 240 237 238; --c-surface-container-low: 246 243 244;
  --c-surface-container-lowest: 255 255 255; --c-surface-container-high: 234 231 232;
  --c-surface-container-highest: 229 226 227;
  --c-on-surface: 19 19 20; --c-on-surface-variant: 91 63 69;
  --c-background: 255 255 255; --c-on-background: 19 19 20;
  --c-outline: 143 111 117; --c-outline-variant: 227 189 196;
  --c-body: 74 74 74; --c-heading: 19 19 20;
  --c-line: 229 231 235; --c-muted: 107 114 128;
  --c-bg: #ffffff;
  --c-card-bg: #F8F9FA; --c-card-border: #e5e7eb;
  --c-glass-bg: #ffffff; --c-glass-border: #e5e7eb;
  --c-glass-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --c-sweep: rgba(0,0,0,0.02);
}

.dark {
  --c-primary: 255 51 133; --c-on-primary: 255 255 255; --c-primary-container: 255 51 133;
  --c-secondary: 200 197 203; --c-on-secondary: 48 48 52;
  --c-surface: 19 19 20; --c-surface-dim: 19 19 20;
  --c-surface-container: 32 31 32; --c-surface-container-low: 28 27 28;
  --c-surface-container-lowest: 14 14 15; --c-surface-container-high: 42 42 43;
  --c-surface-container-highest: 53 52 54;
  --c-on-surface: 255 255 255; --c-on-surface-variant: 255 255 255;
  --c-background: 19 19 20; --c-on-background: 255 255 255;
  --c-outline: 170 136 143; --c-outline-variant: 91 63 70;
  --c-body: 255 255 255; --c-heading: 255 255 255;
  --c-line: 255 255 255; --c-muted: 255 255 255;
  --c-bg: #0e0e0f;
  --c-card-bg: rgba(255,255,255,0.03); --c-card-border: rgba(255,255,255,0.08);
  --c-glass-bg: rgba(255,255,255,0.03); --c-glass-border: rgba(255,255,255,0.08);
  --c-glass-shadow: none;
  --c-sweep: rgba(255,255,255,0.05);
}

body {
  background-color: var(--c-bg);
  color: rgb(var(--c-body));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'Poppins', sans-serif;
}

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.card, .glass-card {
  background: var(--c-card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-card-border);
  box-shadow: var(--c-glass-shadow);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.card:hover, .glass-card:hover { border-color: rgb(var(--c-primary) / 0.4); }

/* Default sweep: a highlight that travels left-to-right across the card on hover.
   index.html overrides this with a diagonal full-cover variant — see page-index.css */
.light-sweep { position: relative; overflow: hidden; }
.light-sweep::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--c-sweep), transparent);
  transition: 0.5s;
}
.light-sweep:hover::after { left: 100%; }

.mesh-glow { background: radial-gradient(circle at 50% 50%, rgb(var(--c-primary) / 0.08) 0%, transparent 60%); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 1px solid rgb(var(--c-line) / 0.2);
  color: rgb(var(--c-on-surface));
  transition: all 0.3s ease;
}
.theme-toggle:hover { border-color: rgb(var(--c-primary) / 0.5); color: rgb(var(--c-primary)); }

/* Shared booking modal (nav "Start a Project" on every page) */
.calendly-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.calendly-overlay.open { opacity: 1; pointer-events: auto; }
.calendly-modal { transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease; }
.calendly-overlay.open .calendly-modal { transform: translateY(0) scale(1); opacity: 1; }
.calendly-embed { min-width: 320px; height: 700px; max-height: 70vh; }
.calendly-embed .calendly-spinner { display: none; }
.calendly-embed iframe { border: 0; }
@media (max-width: 640px) { .calendly-embed { height: 640px; max-height: 68vh; } }
@media (prefers-reduced-motion: reduce) { .calendly-modal, .calendly-overlay { transition: none; } }