/* ═══════════════════════════════════════════════════════════════
   Tesouros Portal — Design Tokens
   A premium, warm, discovery-oriented design system
   ═══════════════════════════════════════════════════════════════ */

/* ─── Google Fonts ─── */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ═══════ COLOR PALETTE ═══════ */

  /* Gold / Amber — Primary brand color */
  --ts-gold-50: #fff9eb;
  --ts-gold-100: #fff0cc;
  --ts-gold-200: #ffe099;
  --ts-gold-300: #ffcf66;
  --ts-gold-400: #f0c060;
  --ts-gold-500: #c9922a;
  --ts-gold-600: #a87520;
  --ts-gold-700: #875a18;
  --ts-gold-800: #664210;
  --ts-gold-900: #452c0a;

  /* Deep Navy — Background & contrast */
  --ts-navy-50: #e8e9f0;
  --ts-navy-100: #c5c8d9;
  --ts-navy-200: #9da2bf;
  --ts-navy-300: #757ca5;
  --ts-navy-400: #525b8a;
  --ts-navy-500: #363f6e;
  --ts-navy-600: #2c2c3e;
  --ts-navy-700: #222237;
  --ts-navy-800: #1a1a2e;
  --ts-navy-900: #111122;
  --ts-navy-950: #0b0b18;

  /* Cream — Light surfaces */
  --ts-cream-50: #ffffff;
  --ts-cream-100: #fefdfb;
  --ts-cream-200: #faf7f0;
  --ts-cream-300: #f5f0e5;
  --ts-cream-400: #ede6d6;
  --ts-cream-500: #e0d6c0;
  --ts-cream-600: #c9bda3;
  --ts-cream-700: #a89a80;
  --ts-cream-800: #7a6e5a;
  --ts-cream-900: #4d4438;

  /* Neutral — UI grays */
  --ts-neutral-50: #fafafa;
  --ts-neutral-100: #f5f5f5;
  --ts-neutral-200: #e5e5e5;
  --ts-neutral-300: #d4d4d4;
  --ts-neutral-400: #a3a3a3;
  --ts-neutral-500: #737373;
  --ts-neutral-600: #525252;
  --ts-neutral-700: #404040;
  --ts-neutral-800: #262626;
  --ts-neutral-900: #171717;

  /* Semantic — Success (Emerald) */
  --ts-success-50: #ecfdf5;
  --ts-success-100: #d1fae5;
  --ts-success-200: #a7f3d0;
  --ts-success-300: #6ee7b7;
  --ts-success-400: #34d399;
  --ts-success-500: #10b981;
  --ts-success-600: #059669;
  --ts-success-700: #047857;
  --ts-success-800: #065f46;
  --ts-success-900: #064e3b;

  /* Semantic — Error (Terracotta) */
  --ts-error-50: #fef2f2;
  --ts-error-100: #fee2e2;
  --ts-error-200: #fecaca;
  --ts-error-300: #fca5a5;
  --ts-error-400: #f87171;
  --ts-error-500: #c0392b;
  --ts-error-600: #a93226;
  --ts-error-700: #922b21;
  --ts-error-800: #7b241c;
  --ts-error-900: #641e16;

  /* Semantic — Warning (Amber) */
  --ts-warning-50: #fffbeb;
  --ts-warning-100: #fef3c7;
  --ts-warning-200: #fde68a;
  --ts-warning-300: #fcd34d;
  --ts-warning-400: #fbbf24;
  --ts-warning-500: #f59e0b;
  --ts-warning-600: #d97706;
  --ts-warning-700: #b45309;
  --ts-warning-800: #92400e;
  --ts-warning-900: #78350f;

  /* Semantic — Info (Blue) */
  --ts-info-50: #eff6ff;
  --ts-info-100: #dbeafe;
  --ts-info-200: #bfdbfe;
  --ts-info-300: #93c5fd;
  --ts-info-400: #60a5fa;
  --ts-info-500: #3b82f6;
  --ts-info-600: #2563eb;
  --ts-info-700: #1d4ed8;
  --ts-info-800: #1e40af;
  --ts-info-900: #1e3a8a;

  /* ═══════ TYPOGRAPHY ═══════ */

  /* Font families */
  --ts-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ts-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --ts-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

  /* Font sizes — modular scale (1.25 ratio) */
  --ts-text-xs: 0.75rem;
  /* 12px */
  --ts-text-sm: 0.875rem;
  /* 14px */
  --ts-text-base: 1rem;
  /* 16px */
  --ts-text-lg: 1.125rem;
  /* 18px */
  --ts-text-xl: 1.25rem;
  /* 20px */
  --ts-text-2xl: 1.5rem;
  /* 24px */
  --ts-text-3xl: 1.875rem;
  /* 30px */
  --ts-text-4xl: 2.25rem;
  /* 36px */
  --ts-text-5xl: 3rem;
  /* 48px */
  --ts-text-6xl: 3.75rem;
  /* 60px */

  /* Font weights */
  --ts-font-light: 300;
  --ts-font-regular: 400;
  --ts-font-medium: 500;
  --ts-font-semibold: 600;
  --ts-font-bold: 700;
  --ts-font-extrabold: 800;

  /* Line heights */
  --ts-leading-tight: 1.2;
  --ts-leading-snug: 1.375;
  --ts-leading-normal: 1.5;
  --ts-leading-relaxed: 1.625;
  --ts-leading-loose: 2;

  /* Letter spacing */
  --ts-tracking-tighter: -0.05em;
  --ts-tracking-tight: -0.025em;
  --ts-tracking-normal: 0;
  --ts-tracking-wide: 0.025em;
  --ts-tracking-wider: 0.05em;
  --ts-tracking-widest: 0.1em;

  /* ═══════ SPACING ═══════ */
  /* Base: 4px */
  --ts-space-0: 0;
  --ts-space-px: 1px;
  --ts-space-0_5: 0.125rem;
  /* 2px */
  --ts-space-1: 0.25rem;
  /* 4px */
  --ts-space-1_5: 0.375rem;
  /* 6px */
  --ts-space-2: 0.5rem;
  /* 8px */
  --ts-space-2_5: 0.625rem;
  /* 10px */
  --ts-space-3: 0.75rem;
  /* 12px */
  --ts-space-4: 1rem;
  /* 16px */
  --ts-space-5: 1.25rem;
  /* 20px */
  --ts-space-6: 1.5rem;
  /* 24px */
  --ts-space-8: 2rem;
  /* 32px */
  --ts-space-10: 2.5rem;
  /* 40px */
  --ts-space-12: 3rem;
  /* 48px */
  --ts-space-16: 4rem;
  /* 64px */
  --ts-space-20: 5rem;
  /* 80px */
  --ts-space-24: 6rem;
  /* 96px */

  /* ═══════ BORDER RADIUS ═══════ */
  /* Premium feel — soft, never sharp */
  --ts-radius-sm: 6px;
  --ts-radius-md: 10px;
  --ts-radius-lg: 14px;
  --ts-radius-xl: 20px;
  --ts-radius-2xl: 28px;
  --ts-radius-full: 9999px;

  /* ═══════ SHADOWS ═══════ */
  /* Warm golden tint for premium feel */
  --ts-shadow-xs: 0 1px 2px rgba(201, 146, 42, 0.04);
  --ts-shadow-sm: 0 2px 4px rgba(201, 146, 42, 0.06), 0 1px 2px
    rgba(0, 0, 0, 0.04);
  --ts-shadow-md: 0 4px 12px rgba(201, 146, 42, 0.08), 0 2px 4px
    rgba(0, 0, 0, 0.04);
  --ts-shadow-lg: 0 8px 24px rgba(201, 146, 42, 0.1), 0 4px 8px
    rgba(0, 0, 0, 0.06);
  --ts-shadow-xl: 0 16px 48px rgba(201, 146, 42, 0.12), 0 8px 16px
    rgba(0, 0, 0, 0.08);
  --ts-shadow-2xl: 0 24px 64px rgba(201, 146, 42, 0.16), 0 12px 24px
    rgba(0, 0, 0, 0.1);

  /* Golden glow for highlights */
  --ts-glow-gold: 0 0 20px rgba(240, 192, 96, 0.25), 0 0 40px
    rgba(201, 146, 42, 0.1);
  --ts-glow-soft: 0 0 12px rgba(240, 192, 96, 0.15);

  /* Dark mode shadows */
  --ts-shadow-dark-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --ts-shadow-dark-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --ts-shadow-dark-lg: 0 10px 40px rgba(0, 0, 0, 0.6);

  /* ═══════ MOTION ═══════ */
  --ts-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ts-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ts-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ts-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ts-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ts-duration-fast: 100ms;
  --ts-duration-normal: 200ms;
  --ts-duration-slow: 350ms;
  --ts-duration-slower: 500ms;

  /* ═══════ Z-INDEX ═══════ */
  --ts-z-base: 0;
  --ts-z-dropdown: 10;
  --ts-z-sticky: 20;
  --ts-z-overlay: 30;
  --ts-z-modal: 40;
  --ts-z-toast: 50;
  --ts-z-tooltip: 60;

  /* ═══════ CONTAINER WIDTHS ═══════ */
  --ts-max-w-sm: 640px;
  --ts-max-w-md: 768px;
  --ts-max-w-lg: 1024px;
  --ts-max-w-xl: 1280px;
  --ts-max-w-2xl: 1536px;
  --ts-max-w-prose: 65ch;
}

/* ═══════ ACCESSIBILITY ═══════ */
.ts-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;
}

/* Focus ring — golden outline for accessibility */
.ts-focus-ring:focus-visible,
*:focus-visible {
  outline: 2px solid var(--ts-gold-400);
  outline-offset: 2px;
  border-radius: var(--ts-radius-sm);
}

/* Reduced motion */
@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;
  }
}

/* Touch targets 44px - Apple HIG e WCAG 2.1 */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Bottom Navigation */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: var(--ts-z-overlay);
  background: var(--ts-navy-800);
  border-top: 1px solid var(--ts-navy-600);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-navigation {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bottom-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--ts-space-2) var(--ts-space-3);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-1);
  min-width: 44px;
  min-height: 44px;
  padding: var(--ts-space-1_5) var(--ts-space-2);
  background: transparent;
  border: none;
  border-radius: var(--ts-radius-lg);
  color: var(--ts-navy-300);
  cursor: pointer;
  transition: all var(--ts-duration-fast) var(--ts-ease);
  position: relative;
}

.bottom-nav-item:hover {
  background: var(--ts-navy-700);
  color: var(--ts-navy-100);
}

.bottom-nav-item.active {
  color: var(--ts-gold-400);
  background: linear-gradient(
    180deg,
    rgba(240, 192, 96, 0.15) 0%,
    transparent 100%
  );
}

.bottom-nav-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--ts-error-500);
  color: white;
  font-size: 10px;
  font-weight: var(--ts-font-semibold);
  line-height: 16px;
  text-align: center;
  border-radius: var(--ts-radius-full);
  font-family: var(--ts-font-body);
}

.bottom-nav-label {
  font-size: 10px;
  font-weight: var(--ts-font-medium);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Lazy Image Styles */
.lazy-image-container {
  position: relative;
  display: block;
  overflow: hidden;
}

.lazy-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--ts-duration-slow) var(--ts-ease);
}

.lazy-image.loaded {
  opacity: 1;
}

.lazy-image-placeholder {
  position: absolute;
  inset: 0;
  background: var(--ts-navy-700);
  border-radius: inherit;
}

.lazy-image-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.lazy-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--ts-navy-400);
  font-size: var(--ts-text-sm);
}

@media (max-width: 480px) {
  .mobile-nav {
    height: 70px;
  }

  .bottom-nav-item {
    padding: var(--ts-space-1) var(--ts-space-1_5);
  }

  .bottom-nav-label {
    font-size: 9px;
  }
}