/**
 * Eftelya Atelier - Bohemian Design System
 * Warm neutrals, earthy accents, organic textures
 */

:root {
  /* Warm neutrals */
  --bohemian-cream: #F5F0E8;
  --bohemian-sand: #E8DFD4;
  --bohemian-terracotta: #C4A77D;
  --bohemian-deep-brown: #5C4A3D;
  --bohemian-warm-white: #FDFBF7;

  /* Accents */
  --bohemian-dusty-rose: #B88B7A;
  --bohemian-sage: #8B9A7A;
  --bohemian-amber: #D4A574;
  --bohemian-ochre: #C9A962;

  /* Text */
  --bohemian-text: #4A3F35;
  --bohemian-text-muted: #6B5D52;
  --bohemian-text-light: #8B7D72;

  /* Semantic */
  --bohemian-bg: var(--bohemian-cream);
  --bohemian-surface: var(--bohemian-warm-white);
  --bohemian-border: rgba(92, 74, 61, 0.15);
  --bohemian-focus-ring: var(--bohemian-terracotta);

  /* Typography */
  --bohemian-font-display: "Cormorant Garamond", "Georgia", serif;
  --bohemian-font-body: "Lora", "Georgia", serif;

  /* Spacing */
  --bohemian-section-padding: clamp(3rem, 8vw, 6rem);
  --bohemian-content-width: min(90vw, 1200px);
}

/* Font imports - loaded in HTML head */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

/* Base */
.bohemian {
  font-family: var(--bohemian-font-body);
  color: var(--bohemian-text);
  background-color: var(--bohemian-bg);
  line-height: 1.6;
  -webkit-tap-highlight-color: rgba(196, 167, 125, 0.2);
}

.bohemian h1,
.bohemian h2,
.bohemian h3 {
  font-family: var(--bohemian-font-display);
  font-weight: 500;
  text-wrap: balance;
}

.bohemian h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.15;
  color: var(--bohemian-deep-brown);
}

.bohemian h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--bohemian-deep-brown);
}

/* Focus states - never outline-none without replacement */
.bohemian a:focus-visible,
.bohemian button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bohemian-bg), 0 0 0 4px var(--bohemian-focus-ring);
}

.bohemian input:focus-visible,
.bohemian textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bohemian-focus-ring);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bohemian *,
  .bohemian *::before,
  .bohemian *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}