@tailwind base;
@tailwind components;
@tailwind utilities;

:root,
[data-theme="dark"],
.dark {
  /* Change this value to re-theme the entire site's accent color */
  --color-accent: #4fdbc8;

  --color-primary: var(--color-accent);
  --color-primary-dim: color-mix(in srgb, var(--color-accent) 70%, black);
  --color-primary-container: color-mix(in srgb, var(--color-accent) 70%, black);
  --color-on-primary: #003731;
  --color-on-primary-container: #00423b;
  
  --color-secondary: color-mix(in srgb, var(--color-accent) 85%, white);
  --color-secondary-container: color-mix(in srgb, var(--color-accent) 60%, black);
  --color-on-secondary: #003732;

  --color-surface: #0f131e;
  --color-surface-dim: #0f131e;
  --color-surface-bright: #353945;
  --color-surface-variant: #313441;
  --color-surface-container-lowest: #0a0e19;
  --color-surface-container-low: #171b27;
  --color-surface-container: #1b1f2b;
  --color-surface-container-high: #262a36;
  --color-surface-container-highest: #313441;
  --color-surface-tint: var(--color-accent);
  
  --color-on-surface: #dfe2f2;
  --color-on-surface-variant: #bbcac6;
  
  --color-tertiary: #ffb59e;
  
  /* Reduced border opacity for dark mode: 8-12% white */
  --color-outline: rgba(255, 255, 255, 0.15);
  --color-outline-variant: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Explicit text-selection tokens: Dark mode (~30-35% accent, white text) */
  --selection-bg: color-mix(in srgb, var(--color-accent) 32%, transparent);
  --selection-color: #ffffff;
  
  --color-error: #ffb4ab;
  
  color-scheme: dark;
}

[data-theme="light"] {
  /* Change this value to re-theme the entire site's accent color (light mode variant) */
  --color-accent: #0d9488;

  --color-primary: var(--color-accent);
  --color-primary-dim: color-mix(in srgb, var(--color-accent) 70%, white);
  --color-primary-container: color-mix(in srgb, var(--color-accent) 80%, white);
  --color-on-primary: #ffffff;
  --color-on-primary-container: #003731;
  
  --color-secondary: color-mix(in srgb, var(--color-accent) 85%, black);
  --color-secondary-container: color-mix(in srgb, var(--color-accent) 25%, white);
  --color-on-secondary: #ffffff;

  --color-surface: #f8fafc;
  --color-surface-dim: #f1f5f9;
  --color-surface-bright: #ffffff;
  --color-surface-variant: #e2e8f0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8fafc;
  --color-surface-container: #f1f5f9;
  --color-surface-container-high: #e2e8f0;
  --color-surface-container-highest: #cbd5e1;
  --color-surface-tint: var(--color-accent);
  
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;
  
  --color-tertiary: #ea580c;
  
  --color-outline: #94a3b8;
  --color-outline-variant: #e2e8f0;
  --color-border-subtle: #e2e8f0;

  /* Explicit text-selection tokens: Light mode (~25-30% accent, dark navy text) */
  --selection-bg: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --selection-color: #0f172a;
  
  --color-error: #dc2626;
  
  color-scheme: light;
}

/* ==========================================================================
   Site-wide Explicit Text Selection Styling (Dynamic Accent Themed)
   ========================================================================== */

/* Universal fallback */
::selection {
  background-color: var(--selection-bg, color-mix(in srgb, var(--color-accent) 32%, transparent)) !important;
  color: var(--selection-color, #ffffff) !important;
}



/* Light Mode Selection */
[data-theme="light"] ::selection,
[data-theme="light"]::selection {
  background-color: color-mix(in srgb, var(--color-accent) 28%, transparent) !important;
  color: #0f172a !important;
}



/* Dark Mode Selection */
:root ::selection,
:root::selection,
.dark ::selection,
.dark::selection,
[data-theme="dark"] ::selection,
[data-theme="dark"]::selection {
  background-color: color-mix(in srgb, var(--color-accent) 32%, transparent) !important;
  color: #ffffff !important;
}



/* Site-wide Dark Mode & Light Mode Border Color Defaults */
.dark,
[data-theme="dark"] {
  border-color: rgba(255, 255, 255, 0.08);
}
.dark *,
.dark *::before,
.dark *::after,
[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"],
[data-theme="light"] *,
[data-theme="light"] *::before,
[data-theme="light"] *::after {
  border-color: #e2e8f0;
}

/* Specific Border Class Overrides */
.border-primary,
.border-accent {
  border-color: var(--color-accent) !important;
}
.hover\:border-primary:hover,
.hover\:border-accent:hover {
  border-color: var(--color-accent) !important;
}
.hover\:border-primary\/40:hover,
.hover\:border-accent\/40:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
}
.border-transparent {
  border-color: transparent !important;
}

/* Giant Oversized Architectural Watermark Motif (Outline-Only Text, Clean Subtle Texture) */
.watermark-motif {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
  text-stroke: 1px rgba(255, 255, 255, 0.045);
  opacity: 0.85;
  transition: opacity 150ms ease;
  user-select: none;
  pointer-events: none;
}

[data-theme="light"] .watermark-motif {
  -webkit-text-stroke: 1px rgba(15, 23, 42, 0.06);
  text-stroke: 1px rgba(15, 23, 42, 0.06);
  opacity: 0.9;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  transition: background-color 150ms ease, color 150ms ease;
  overflow-x: hidden;
}



/* Architectural Micro Labels */
.label-caps {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tabular numbers for architectural telemetry */
.tabular-nums {
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}

/* ==========================================================================
   Restrained Animations & Micro-Interactions
   ========================================================================== */

/* 1. Scroll-Triggered Entrance Animation (400ms ease-out) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1), transform 400ms cubic-bezier(0, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Hover Micro-Interactions: Cards lift slightly (translateY(-2px) + soft shadow) */
.card-lift {
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1), border-color 150ms ease, background-color 150ms ease;
}

.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.35), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .card-lift:hover {
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

/* 3. Ambient Details: Slow subtle breathing pulse on section dot */
@keyframes ambient-dot-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }
}

.ambient-dot {
  animation: ambient-dot-pulse 3.5s ease-in-out infinite;
}

/* 4. Notification Bell Ring Animation (active only when unread items exist) */
@keyframes bell-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-3deg); }
  90% { transform: rotate(3deg); }
}

.bell-ring-active {
  transform-origin: top center;
  animation: bell-shake 1.2s ease-in-out 2;
}

/* 5. Accessibility: Respect prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card-lift {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  .ambient-dot {
    animation: none !important;
  }
  .bell-ring-active {
    animation: none !important;
  }
}

/* Custom Scrollbar for Code and Cards */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-container-lowest);
}

::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ==========================================================================
   Shiki Syntax Highlighting (Dual Theme Support: GitHub Light & GitHub Dark)
   ========================================================================== */

/* Light mode defaults: GitHub Light tokens */
.astro-code {
  background-color: var(--color-surface-container-lowest) !important;
  color: #24292e !important;
}

/* Dark mode overrides: GitHub Dark tokens */
html.dark .astro-code,
[data-theme="dark"] .astro-code {
  background-color: var(--color-surface-container-lowest) !important;
  color: var(--shiki-dark, #e1e4e8) !important;
}

html.dark .astro-code span,
[data-theme="dark"] .astro-code span {
  color: var(--shiki-dark, inherit) !important;
  font-style: var(--shiki-dark-font-style, inherit);
  font-weight: var(--shiki-dark-font-weight, inherit);
  text-decoration: var(--shiki-dark-text-decoration, inherit);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .astro-code {
    background-color: var(--color-surface-container-lowest) !important;
    color: var(--shiki-dark, #e1e4e8) !important;
  }

  :root:not([data-theme="light"]) .astro-code span {
    color: var(--shiki-dark, inherit) !important;
    font-style: var(--shiki-dark-font-style, inherit);
    font-weight: var(--shiki-dark-font-weight, inherit);
    text-decoration: var(--shiki-dark-text-decoration, inherit);
  }
}

/* ==========================================================================
   Ambient Particle Background Layer Integration
   ========================================================================== */
#particle-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6; /* Lower particle opacity by 40% */
}

@media (max-width: 767px) {
  #particle-container {
    display: none !important;
  }
}

main.bg-surface {
  background-color: transparent !important;
}

/* ==========================================================================
   Accessibility & Keyboard Navigation (:focus-visible)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Skip to content link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only.focus\:not-sr-only:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

/* Code block wrapper with copy button */
.code-block-wrapper {
  position: relative;
  margin: 2rem 0;
}

.code-block-wrapper pre {
  margin: 0 !important;
}

.copy-code-btn {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--color-on-surface-variant);
  background-color: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
  z-index: 10;
}

.copy-code-btn:hover {
  opacity: 1;
  color: var(--color-primary);
  background-color: var(--color-surface-container-highest);
}

.copy-code-btn.copied {
  color: #10b981;
  border-color: #10b981;
}