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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 214 52% 25%; /* Dark Blue #1e3a5f */
    
    --card: 0 0% 100%;
    --card-foreground: 214 52% 25%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 214 52% 25%;
    
    --primary: 214 52% 25%; /* Dark Blue #1e3a5f */
    --primary-foreground: 0 0% 100%;
    
    --secondary: 33 100% 50%; /* Orange #ff8c00 */
    --secondary-foreground: 0 0% 100%;
    
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    
    --accent: 33 100% 50%; /* Orange #ff8c00 */
    --accent-foreground: 0 0% 100%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 33 100% 50%;
    
    --radius: 1rem;

    /* Typography Scale */
    --text-base: 16px;
    --h1-mobile: 28px;
    --h1-tablet: 36px;
    --h1-desktop: 48px;
    
    --h2-mobile: 24px;
    --h2-tablet: 28px;
    --h2-desktop: 36px;
    
    --h3-mobile: 18px;
    --h3-tablet: 20px;
    --h3-desktop: 24px;

    /* Spacing */
    --spacing-mobile-gap: 16px;
    --spacing-mobile-px: 20px;

    /* Image Aspect Ratios */
    --image-ratio-hero: 16/9;
    --image-ratio-card: 4/3;
    --image-ratio-square: 1/1;
    --image-ratio-vertical: 9/16;
  }

  .dark {
    --background: 214 52% 25%;
    --foreground: 0 0% 98%;
    --card: 214 52% 25%;
    --card-foreground: 0 0% 98%;
    --popover: 214 52% 25%;
    --popover-foreground: 0 0% 98%;
    --primary: 214 52% 25%;
    --primary-foreground: 0 0% 100%;
    --secondary: 33 100% 50%;
    --secondary-foreground: 0 0% 98%;
    --muted: 217 32% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 33 100% 50%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    --border: 217 32% 17%;
    --input: 217 32% 17%;
    --ring: 33 100% 50%;
  }

  html {
    font-size: var(--text-base);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans leading-relaxed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Global Heading Typography */
  h1, .h1 {
    font-size: var(--h1-mobile);
    line-height: 1.2;
    @apply font-extrabold;
  }
  @media (min-width: 768px) {
    h1, .h1 { font-size: var(--h1-tablet); }
  }
  @media (min-width: 1024px) {
    h1, .h1 { font-size: var(--h1-desktop); }
  }

  h2, .h2 {
    font-size: var(--h2-mobile);
    line-height: 1.25;
    @apply font-bold;
  }
  @media (min-width: 768px) {
    h2, .h2 { font-size: var(--h2-tablet); }
  }
  @media (min-width: 1024px) {
    h2, .h2 { font-size: var(--h2-desktop); }
  }

  h3, .h3 {
    font-size: var(--h3-mobile);
    line-height: 1.3;
    @apply font-bold;
  }
  @media (min-width: 768px) {
    h3, .h3 { font-size: var(--h3-tablet); }
  }
  @media (min-width: 1024px) {
    h3, .h3 { font-size: var(--h3-desktop); }
  }
}

@layer components {
  .surface-base {
    @apply bg-background text-foreground;
  }
  .surface-elevated {
    @apply bg-card text-card-foreground border border-border shadow-sm rounded-2xl;
  }

  /* Image Container Utilities */
  .image-container-hero {
    aspect-ratio: var(--image-ratio-hero);
    @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0 rounded-2xl;
  }
  .image-container-card {
    aspect-ratio: var(--image-ratio-card);
    @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
  }
  .image-container-square {
    aspect-ratio: var(--image-ratio-square);
    @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
  }
  .image-container-vertical {
    aspect-ratio: var(--image-ratio-vertical);
    @apply relative overflow-hidden bg-gray-100 w-full flex-shrink-0;
  }
  .image-fallback {
    @apply absolute inset-0 flex flex-col items-center justify-center bg-gray-100 text-gray-400 w-full h-full;
  }

  .vertical-image {
    aspect-ratio: 9/16;
    object-fit: cover;
    @apply w-full h-full;
  }

  .image-container-hero img,
  .image-container-card img,
  .image-container-square img,
  .image-container-vertical img {
    @apply absolute inset-0 w-full h-full object-cover object-center;
  }

  .transition-default {
    @apply transition-all duration-300 ease-out will-change-transform;
  }
  
  /* Mobile-Optimized Form Elements */
  .form-input {
    min-height: 48px;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px 16px;
    border-width: 2px;
    border-radius: 8px;
    @apply w-full border-input bg-background text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 transition-colors shadow-sm;
  }

  .form-textarea {
    min-height: 120px;
    font-size: 16px !important;
    padding: 12px 16px;
    border-width: 2px;
    border-radius: 8px;
    @apply w-full border-input bg-background text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 transition-colors shadow-sm resize-y;
  }

  .form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: hsl(var(--foreground));
    @apply block;
  }

  /* Mobile-Optimized Buttons */
  .btn-responsive {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 8px;
    @apply inline-flex items-center justify-center font-bold transition-all duration-300 w-full sm:w-auto;
  }
}