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

@layer base {
  :root {
    /* Modern Background System */
    --background: 210 17% 98%;
    --background-secondary: 210 17% 96%;
    --background-tertiary: 210 17% 94%;
    --foreground: 222.2 84% 4.9%;
    --foreground-secondary: 215.4 16.3% 46.9%;

    /* Enhanced Card System */
    --card: 0 0% 100%;
    --card-secondary: 210 17% 98%;
    --card-foreground: 222.2 84% 4.9%;
    --card-border: 214.3 31.8% 91.4%;

    /* Modern Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Brand Colors - Enhanced System from Brand Book */
    --primary: 134 45% 20%;           /* #34502b - Main brand green */
    --primary-light: 82 30% 65%;      /* #b7c895 - Light sage green */
    --primary-medium: 82 35% 40%;     /* #7c9457 - Medium olive green */
    --primary-dark: 146 66% 25%;      /* #1b864a - Forest green */
    --primary-darker: 134 45% 15%;    /* #2a4023 - Darker brand green for gradients */
    --primary-foreground: 0 0% 98%;
    --primary-muted: 134 25% 85%;
    
    /* Supporting Brand Colors */
    --brand-light-gray: 0 0% 85%;     /* #dadada */
    --brand-dark-gray: 0 0% 53%;      /* #878787 */
    --brand-charcoal: 60 2% 11%;      /* #1d1d1b */
    --brand-beige: 35 55% 82%;        /* #f0d2b0 */
    --brand-light-blue: 194 77% 85%;  /* #bce2f3 */
    --brand-blue: 192 60% 65%;        /* #6ec0dc */
    --brand-dark-teal: 192 90% 26%;   /* #09657b */
    --brand-orange: 22 62% 60%;       /* #dd8c57 */
    --brand-brown: 22 45% 40%;        /* #945438 */

    /* Modern Secondary System */
    --secondary: 210 17% 95%;
    --secondary-hover: 210 17% 90%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    /* Enhanced Muted Colors */
    --muted: 210 17% 95%;
    --muted-hover: 210 17% 90%;
    --muted-foreground: 215.4 16.3% 46.9%;

    /* Accent System */
    --accent: 134 25% 88%;
    --accent-hover: 134 30% 82%;
    --accent-foreground: 134 61% 20%;

    /* Status Colors */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --success: 134 61% 41%;
    --success-foreground: 0 0% 98%;
    --warning: 43 96% 56%;
    --warning-foreground: 222.2 84% 4.9%;

    /* Modern Border System */
    --border: 134 45% 20% / 0.2;
    --border-strong: 214.3 31.8% 85%;
    --input: 214.3 31.8% 91.4%;
    --ring: 134 61% 20%;

    /* Enhanced Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px rgb(134 150 79 / 0.15);

    /* Modern Radius System */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Sidebar System */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 134 61% 20%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 134 25% 88%;
    --sidebar-accent-foreground: 134 61% 20%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 134 61% 20%;
  }

  .dark {
    /* Dark Background System */
    --background: 222.2 84% 4.9%;
    --background-secondary: 217.2 32.6% 17.5%;
    --background-tertiary: 217.2 32.6% 15%;
    --foreground: 210 40% 98%;
    --foreground-secondary: 215 20.2% 65.1%;

    /* Dark Card System */
    --card: 222.2 84% 4.9%;
    --card-secondary: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --card-border: 217.2 32.6% 17.5%;

    /* Dark Popover */
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    /* Dark Brand Colors */
    --primary: 134 50% 55%;  /* Lighter green for dark mode */
    --primary-light: 134 40% 70%;
    --primary-dark: 134 60% 45%;
    --primary-foreground: 222.2 84% 4.9%;
    --primary-muted: 134 25% 25%;

    /* Dark Secondary System */
    --secondary: 217.2 32.6% 17.5%;
    --secondary-hover: 217.2 32.6% 20%;
    --secondary-foreground: 210 40% 98%;

    /* Dark Muted Colors */
    --muted: 217.2 32.6% 17.5%;
    --muted-hover: 217.2 32.6% 20%;
    --muted-foreground: 215 20.2% 65.1%;

    /* Dark Accent System */
    --accent: 217.2 32.6% 17.5%;
    --accent-hover: 217.2 32.6% 20%;
    --accent-foreground: 134 50% 55%;

    /* Dark Status Colors */
    --destructive: 0 62.8% 50.6%;
    --destructive-foreground: 210 40% 98%;
    --success: 134 50% 55%;
    --success-foreground: 222.2 84% 4.9%;
    --warning: 43 96% 56%;
    --warning-foreground: 222.2 84% 4.9%;

    /* Dark Border System */
    --border: 217.2 32.6% 17.5%;
    --border-strong: 217.2 32.6% 25%;
    --input: 217.2 32.6% 17.5%;
    --ring: 134 50% 55%;

    /* Dark Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
    --shadow-glow: 0 0 20px rgb(134 202 140 / 0.2);

    /* Dark Sidebar System */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 134 50% 55%;
    --sidebar-primary-foreground: 222.2 84% 4.9%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 134 50% 55%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 134 50% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Inter', 'system-ui', sans-serif;
    scroll-behavior: smooth;
    font-feature-settings: 'cv11', 'ss01';
    font-variant-numeric: tabular-nums;
    
    /* Support for emoji flags */
    font-variant-emoji: unicode;
  }

  body {
    @apply bg-background text-foreground font-body;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    font-family: 'Inter', 'system-ui', sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Support for emoji flags */
    font-variant-emoji: unicode;
    
    /* Enhanced scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(52, 80, 43, 0.3) transparent;
  }

  /* Emoji flag styling - enhanced for better compatibility */
  .emoji-flag {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Twemoji Mozilla', 'Android Emoji', 'EmojiSymbols', sans-serif !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    font-stretch: normal !important;
    font-size: inherit !important;
    line-height: inherit !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-feature-settings: normal !important;
    font-feature-settings: normal !important;
    color: initial !important;
    filter: none !important;
    -webkit-text-fill-color: unset !important;
  }

  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(52, 80, 43, 0.3);
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 80, 43, 0.5);
  }

  /* Typography base styles */
  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
    font-feature-settings: 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
  }

  p, span, div {
    @apply font-body;
  }

  /* Modern button and input styles */
  button, input, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
  }
}

@layer utilities {
  /* Modern Typography System */
  .text-hero {
    font-size: clamp(3rem, 8vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-weight: 700;
    @apply font-display tracking-tight;
  }
  
  .text-display-xl {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 600;
    @apply font-display tracking-tight;
  }
  
  .text-display-lg {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 600;
    @apply font-display tracking-tight;
  }
  
  .text-display-md {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 600;
    @apply font-display tracking-tight;
  }
  
  .text-display-sm {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: 1.25;
    letter-spacing: -0.005em;
    font-weight: 600;
    @apply font-display;
  }
  
  .text-body-xl {
    font-size: 1.25rem;
    line-height: 1.7;
    font-weight: 400;
    @apply font-body;
  }
  
  .text-body-lg {
    font-size: 1.125rem;
    line-height: 1.65;
    font-weight: 400;
    @apply font-body;
  }
  
  .text-body-md {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    @apply font-body;
  }
  
  .text-body-sm {
    font-size: 0.875rem;
    line-height: 1.55;
    font-weight: 400;
    @apply font-body;
  }
  
  .text-caption {
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 500;
    @apply font-body;
  }

  /* Enhanced Glass Morphism */
  .glass {
    @apply bg-white/85 backdrop-blur-lg border border-white/30;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  .glass-strong {
    @apply bg-white/95 backdrop-blur-xl border border-white/40;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  
  .glass-dark {
    @apply bg-black/30 backdrop-blur-lg border border-white/15;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Modern Shadow System */
  .shadow-xs { box-shadow: var(--shadow-xs); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-xl { box-shadow: var(--shadow-xl); }
  .shadow-glow { box-shadow: var(--shadow-glow); }

  /* Advanced Animations */
  .animate-float {
    animation: float 8s ease-in-out infinite;
  }

  .animate-float-delayed {
    animation: float 8s ease-in-out infinite;
    animation-delay: 2s;
  }

  .animate-pulse-soft {
    animation: pulse-soft 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-fade-in {
    animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .animate-scale-in {
    animation: scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .animate-slide-up {
    animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Modern Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-br from-primary via-primary-light to-primary-dark bg-clip-text text-transparent;
    background-size: 200% 200%;
    animation: gradient-shift 6s ease-in-out infinite;
  }

  .gradient-text-subtle {
    @apply bg-gradient-to-r from-foreground to-foreground-secondary bg-clip-text text-transparent;
  }

  /* Enhanced Text Effects */
  .text-shadow-soft {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  }

  .text-glow-soft {
    text-shadow: 0 0 20px hsl(var(--primary) / 0.3), 0 0 40px hsl(var(--primary) / 0.1);
  }

  /* Modern Interactive Effects */
  .hover-lift-soft {
    @apply transition-all duration-500 ease-out hover:-translate-y-0.5 hover:shadow-lg;
  }

  .hover-scale {
    @apply transition-transform duration-300 ease-out hover:scale-[1.02] active:scale-[0.98];
  }

  .hover-glow-primary {
    @apply transition-all duration-300 hover:shadow-lg hover:shadow-primary/20;
  }

  /* Modern Focus States */
  .focus-ring-modern {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }

  /* Layout Utilities */
  .container-narrow {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* Modern Spacing */
  .space-section { @apply py-12 lg:py-16; }
  .space-section-sm { @apply py-8 lg:py-12; }
  .space-component { @apply space-y-8; }
  .space-content { @apply space-y-6; }
}

/* Modern Keyframes */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  66% {
    transform: translateY(-4px) rotate(-0.5deg);
  }
}

@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Enhanced focus styles */
@layer base {
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply ring-2 ring-[#34502b]/30 ring-offset-2 outline-none;
  }
}