@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

@theme {
  --color-primary: #0c6780;
  --color-primary-container: #87ceeb;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #005870;
  
  --color-secondary: #715c00;
  --color-secondary-container: #feda57;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #745f00;
  
  --color-tertiary: #a43c12;
  --color-tertiary-container: #ffb298;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #923004;
  
  --color-background: #f9f9f9;
  --color-on-background: #1a1c1c;
  
  --color-surface: #f9f9f9;
  --color-on-surface: #1a1c1c;
  --color-surface-variant: #e2e2e2;
  --color-on-surface-variant: #3f484c;
  
  --color-surface-bright: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f4;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  
  --color-outline: #6f787d;
  --color-outline-variant: #bfc8cd;
  
  --color-inverse-primary: #89d0ed;
  --color-inverse-surface: #2f3131;
  --color-inverse-on-surface: #f0f1f1;
  
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --radius-default: 1rem;
  --radius-lg: 2rem;
  --radius-xl: 3rem;

  --font-sans: "Plus Jakarta Sans", "Quicksand", sans-serif;
  --font-headline: "Quicksand", sans-serif;

  --spacing-margin-mobile: 20px;
  --spacing-section-gap: 80px;
  --spacing-gutter: 24px;
  --spacing-margin-desktop: 64px;
  --spacing-unit: 8px;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f9f9f9;
  color: #1a1c1c;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif;
}

/* Global Common Icons and Cards */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.wavy-divider {
  aspect-ratio: 960/100;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Global Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

@keyframes drift {
  from { transform: translateX(-10%); }
  to { transform: translateX(110%); }
}

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

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

/* Custom Stitch Elements */
.wavy-top {
  position: absolute;
  top: -49px;
  width: 100%;
  height: 50px;
  background-repeat: repeat-x;
  background-size: 100px 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

.floating-card, .floating-element, .floating {
  animation: float 5s ease-in-out infinite;
}

.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 8s ease-in-out infinite 1s; }

.signature-font {
  font-family: 'Quicksand', sans-serif;
  font-style: italic;
}

.cloud-shape {
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
}

.reveal {
  animation: reveal-fade 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.glass { 
  background: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(20px); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
}

.parallax-stars { 
  position: absolute; 
  pointer-events: none; 
  animation: float 6s ease-in-out infinite; 
}

.mask-image-wavy-top { 
  mask-image: url("data:image/svg+xml,%3Csvg width='1440' height='100' viewBox='0 0 1440 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100V50.5C0 50.5 130 0 360 0C590 0 850 100 1080 100C1310 100 1440 50.5 1440 50.5V100H0Z' fill='black'/%3E%3C/svg%3E"); 
  mask-size: cover; 
  mask-repeat: no-repeat; 
}

.timeline-line { 
  background: linear-gradient(to bottom, transparent, #87ceeb 10%, #87ceeb 90%, transparent); 
}

.masonry { 
  column-count: 3; 
  column-gap: 24px; 
}

@media (max-width: 768px) { 
  .masonry { column-count: 1; } 
}

.active-nav-item {
  background-color: #659dfe;
  color: #003370;
}

.inner-glow {
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.8);
}

.storybook-card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.storybook-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(135, 206, 235, 0.15);
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.cloud-border {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.wavy-divider-svg {
  position: relative;
  height: 80px;
  width: 100%;
  background: transparent;
}

.wavy-divider-svg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f9f9f9' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,149.3C672,149,768,203,864,202.7C960,203,1056,149,1152,117.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 10px;
}

.masonry-item {
  grid-row-end: span 25;
}
.masonry-item.tall { grid-row-end: span 40; }
.masonry-item.wide { grid-column-end: span 2; }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 24px;
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  display: inline-flex;
}

.polaroid-frame {
  padding: 12px 12px 48px 12px;
  background: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transform: rotate(-2deg);
  transition: all 0.3s ease;
}

.polaroid-frame:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 15px 30px rgba(12, 103, 128, 0.2);
}

.ribbon-ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ribbon-content {
  display: inline-block;
  animation: ticker 30s linear infinite;
}

.wavy-border {
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 92%, 90% 90%, 85% 92%, 80% 90%, 75% 92%, 70% 90%, 65% 92%, 60% 90%, 55% 92%, 50% 90%, 45% 92%, 40% 90%, 35% 92%, 30% 90%, 25% 92%, 20% 90%, 15% 92%, 10% 90%, 5% 92%, 0% 90%);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.floating-cloud {
  animation: drift 20s linear infinite;
}

.btn-inner-glow {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.notice-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(12, 103, 128, 0.15);
}
