/* Inter variable font */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Alpine.js: hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Smooth transitions for interactive elements */
a, button, [role="button"], input, select, textarea {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Design tokens - Light mode */
:root {
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FAFAFA;
  --color-bg-tertiary: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAFAFA;
  --color-surface-glass: rgba(255,255,255,0.85);

  --color-brand: #E8600A;
  --color-brand-hover: #CC5209;
  --color-brand-light: #FFF3EB;
  --color-brand-subtle: #FFD9C2;
  --color-brand-text: #FFFFFF;

  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-text-tertiary: #888888;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-dark: #FFFFFF;
  --color-text-hero-heading: #111111;
  --color-text-hero-body: #555555;

  --color-border: #EAEAEA;
  --color-border-hover: #CCCCCC;
  --color-border-brand: rgba(232,96,10,0.3);
  --color-border-glass: rgba(0,0,0,0.05);
  --color-header-shadow: 0 1px 3px rgba(0,0,0,0.08);

  --color-orb-brand: transparent;
  --color-orb-accent: transparent;
  --color-glow-brand: transparent;
  --color-gradient-hero-start: #FFFFFF;
  --color-gradient-hero-end: #FAFAFA;
}

/* Design tokens - Dark mode */
.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #0A0A0A;
  --color-bg-tertiary: #111111;
  --color-surface: #111111;
  --color-surface-hover: #1A1A1A;
  --color-surface-glass: rgba(17,17,17,0.85);

  --color-brand: #F28C38;
  --color-brand-hover: #F5A054;
  --color-brand-light: rgba(232,96,10,0.15);
  --color-brand-subtle: rgba(232,96,10,0.25);
  --color-brand-text: #000000;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #AAAAAA;
  --color-text-tertiary: #777777;
  --color-text-on-brand: #000000;
  --color-text-on-dark: #FFFFFF;
  --color-text-hero-heading: #FFFFFF;
  --color-text-hero-body: #AAAAAA;

  --color-border: #222222;
  --color-border-hover: #444444;
  --color-border-brand: rgba(242,140,56,0.3);
  --color-border-glass: rgba(255,255,255,0.1);
  --color-header-shadow: none;

  --color-orb-brand: transparent;
  --color-orb-accent: transparent;
  --color-glow-brand: transparent;
  --color-gradient-hero-start: #000000;
  --color-gradient-hero-end: #0A0A0A;
}

/* Smooth scrolling - !important to override Tailwind Browser CDN reset */
html {
  scroll-behavior: smooth !important;
}

/* Scroll animations */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
}
.animate-fade-in {
  animation: fadeUp 0.6s ease-out forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-animate-delay="1"] { animation-delay: 0.1s; }
[data-animate-delay="2"] { animation-delay: 0.2s; }
[data-animate-delay="3"] { animation-delay: 0.3s; }
[data-animate-delay="4"] { animation-delay: 0.4s; }

/* Scroll progress bar */
.scroll-progress {
  transform-origin: left;
  transform: scaleX(0);
}

/* Form shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.4s ease-in-out; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-brand);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }

/* Swiper overrides for pillars carousel */
#pillars-swiper .swiper-wrapper {
  align-items: stretch;
}
#pillars-swiper .swiper-slide {
  height: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; }
  .animate-fade-in { animation: none; opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  * { animation-duration: 0.01ms !important; }
}


/* ============================================================
   Markdown-rendered content (.prose fallback)
   Tailwind v4 CDN has no typography plugin, so we define our own
   minimal styling for user-generated markdown (work/project/task
   descriptions).
   ============================================================ */
.prose {
  color: inherit;
  line-height: 1.65;
  font-size: 0.9375rem;
}
.prose :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }
.prose h1 { font-size: 1.35em; }
.prose h2 { font-size: 1.2em; }
.prose h3 { font-size: 1.05em; }
.prose h4 { font-size: 1em; }
.prose p  { margin: 0.75em 0; }
.prose a  { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-brand-hover); }
.prose strong { font-weight: 600; color: var(--color-text-primary); }
.prose em { font-style: italic; }
.prose ul, .prose ol { margin: 0.75em 0; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.25em 0; }
.prose li > ul, .prose li > ol { margin: 0.25em 0; }
.prose blockquote {
  border-left: 3px solid var(--color-border);
  padding: 0.25em 0.75em;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0.75em 0;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75em 1em;
  overflow-x: auto;
  margin: 0.75em 0;
  font-size: 0.8125rem;
}
.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.25em 0;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.75em 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75em 0;
  font-size: 0.875em;
}
.prose th, .prose td {
  border: 1px solid var(--color-border);
  padding: 0.5em 0.75em;
  text-align: left;
}
.prose th { background: var(--color-bg-secondary); font-weight: 600; }

/* Smaller variant */
.prose-sm { font-size: 0.875rem; line-height: 1.6; }
.prose-sm h1 { font-size: 1.25em; }
.prose-sm h2 { font-size: 1.1em; }
.prose-sm h3 { font-size: 1em; }

/* Dark mode adjustments */
.dark .prose code,
.dark .prose pre { background: rgba(255,255,255,0.04); }