@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');

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

:root {
  /* Primary Colors */
  --color-primary: #8B6F47; /* warm cognac brown */
  --color-primary-50: #F8F6F3;
  --color-primary-100: #F0EBE4;
  --color-primary-200: #E1D7C9;
  --color-primary-300: #D2C3AE;
  --color-primary-400: #B59978;
  --color-primary-500: #8B6F47; /* base primary */
  --color-primary-600: #7D6340;
  --color-primary-700: #6A5336;
  --color-primary-800: #57432C;
  --color-primary-900: #483624;

  /* Secondary Colors */
  --color-secondary: #D4C4B0; /* soft champagne beige */
  --color-secondary-50: #FDFCFA;
  --color-secondary-100: #F9F7F3;
  --color-secondary-200: #F2EDE6;
  --color-secondary-300: #EBE3D9;
  --color-secondary-400: #DDD4C5;
  --color-secondary-500: #D4C4B0; /* base secondary */
  --color-secondary-600: #C0B09E;
  --color-secondary-700: #A1958A;
  --color-secondary-800: #827A76;
  --color-secondary-900: #6B6562;

  /* Accent Colors */
  --color-accent: #A0845C; /* rich caramel tone */
  --color-accent-50: #F9F7F4;
  --color-accent-100: #F3EEE8;
  --color-accent-200: #E6DDD1;
  --color-accent-300: #D9CCBA;
  --color-accent-400: #BFAA8B;
  --color-accent-500: #A0845C; /* base accent */
  --color-accent-600: #907753;
  --color-accent-700: #786446;
  --color-accent-800: #605139;
  --color-accent-900: #4F422F;

  /* Background Colors */
  --color-background: #FDFCFA; /* warm off-white */
  --color-surface: #F7F5F2; /* subtle cream */

  /* Text Colors */
  --color-text-primary: #2C2420; /* deep espresso */
  --color-text-secondary: #6B5D52; /* muted brown */

  /* Status Colors */
  --color-success: #7A8471; /* sage green */
  --color-success-50: #F6F7F6;
  --color-success-100: #EDEFED;
  --color-success-200: #DBDDD9;
  --color-success-300: #C9CBC5;
  --color-success-400: #A4A79D;
  --color-success-500: #7A8471; /* base success */
  --color-success-600: #6E7766;
  --color-success-700: #5C6456;
  --color-success-800: #4A5146;
  --color-success-900: #3D423A;

  --color-warning: #B8956A; /* warm amber */
  --color-warning-50: #FBF9F6;
  --color-warning-100: #F7F2ED;
  --color-warning-200: #EFE5DB;
  --color-warning-300: #E7D8C9;
  --color-warning-400: #D7BEA5;
  --color-warning-500: #B8956A; /* base warning */
  --color-warning-600: #A68660;
  --color-warning-700: #8B7150;
  --color-warning-800: #705B40;
  --color-warning-900: #5C4A35;

  --color-error: #A67C5A; /* muted terracotta */
  --color-error-50: #FAF8F6;
  --color-error-100: #F5F0ED;
  --color-error-200: #EBE1DB;
  --color-error-300: #E1D2C9;
  --color-error-400: #CDB4A5;
  --color-error-500: #A67C5A; /* base error */
  --color-error-600: #957051;
  --color-error-700: #7D5E44;
  --color-error-800: #654C37;
  --color-error-900: #533E2E;

  /* Shadow Colors */
  --shadow-warm: rgba(139, 111, 71, 0.15);
  --shadow-warm-light: rgba(139, 111, 71, 0.08);
  --shadow-warm-medium: rgba(139, 111, 71, 0.12);
  --shadow-warm-strong: rgba(139, 111, 71, 0.20);
}

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-primary);
    background-color: var(--color-background);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--color-text-primary);
  }
}

@layer components {
  .shadow-warm-sm {
    box-shadow: 0 1px 2px var(--shadow-warm-light);
  }

  .shadow-warm {
    box-shadow: 0 2px 4px var(--shadow-warm);
  }

  .shadow-warm-md {
    box-shadow: 0 4px 8px var(--shadow-warm-medium);
  }

  .shadow-warm-lg {
    box-shadow: 0 8px 16px var(--shadow-warm);
  }

  .shadow-warm-xl {
    box-shadow: 0 12px 24px var(--shadow-warm-strong);
  }

  .transition-luxury {
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }

  .transition-luxury-slow {
    transition: all 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
}
/* Logo Overlay Zoom Effect (global) */
#logo-zoom-overlay{
  position: fixed;
  z-index: 9999;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logoZoomOut 1.6s cubic-bezier(0.86, 0, 0.07, 1) forwards;
  pointer-events: none !important;
}

#logo-zoom-img{
  width: 320px;
  max-width: 80vw;
  transition: none;
  animation: logoImgZoomOut 1.6s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

@keyframes logoZoomOut{
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logoImgZoomOut{
  0% { transform: scale(2); }
  60% { transform: scale(1); }
  100% { transform: scale(0.25); }
}