/* ============================================
   三日科技工作室 — Custom Styles
   Tailwind handles most styling via utility classes.
   This file contains brand custom properties,
   shadow utilities, and component overrides.
   ============================================ */

/* Brand Custom Properties */
:root {
  --c-alabaster: #F9F8F6;
  --c-alabaster-tint: #F4F2EF;
  --c-obsidian: #1C1B1A;
  --c-terracotta: #C87A5E;
  --c-sage: #7A8B76;
  --c-slate: #4A6274;
  --c-fig: #4B3D54;
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: var(--c-alabaster);
  color: var(--c-obsidian);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif {
  font-family: 'Noto Serif TC', serif;
}

/* Premium Soft Shadows */
.shadow-ethereal {
  box-shadow: 0 4px 24px -4px rgba(28, 27, 26, 0.04), 0 2px 8px -2px rgba(28, 27, 26, 0.02);
}

.shadow-ethereal-hover {
  box-shadow: 0 12px 32px -4px rgba(28, 27, 26, 0.08), 0 4px 12px -2px rgba(28, 27, 26, 0.03);
}

/* Hide default details marker for FAQ */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Form elements — terracotta focus ring */
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 1px var(--c-terracotta), 0 0 0 4px rgba(200, 122, 94, 0.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-alabaster);
}

::-webkit-scrollbar-thumb {
  background: rgba(28, 27, 26, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(28, 27, 26, 0.2);
}

/* Scroll Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}