/** @import must precede all other statements */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Archivo:wght@300;400;500;600;700;800&display=swap");


@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 167 100% 10%;

    --card: 0 0% 100%;
    --card-foreground: 167 100% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 167 100% 10%;

    --primary: 167 100% 10%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 167 100% 10%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 167 100% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 167 100% 10%;

    --radius: 0.5rem;

    --green-1: 167 100% 10%;
    --green-3: 78 89% 68%;
    --orange-1: 20 100% 50%;
    --orange-2: 30 66% 86%;
    --orange-3: 30 60% 92%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }

  :where(p, span, li, h1, h2, h3, h4, h5, h6, a, button, label, td, th) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  pre,
  code {
    overflow-x: auto;
    white-space: pre;
  }
}


/* ============================================================
   FONTS
============================================================ */
.font-merriweather {
  font-family: 'Merriweather', serif;
}
.font-archivo {
  font-family: 'Archivo', sans-serif;
}
strong {
  font-weight: 700 !important;
}

/* ============================================================
   CUSTOM COLORS (HSL + custom palettes)
============================================================ */
.border {
  border-color: hsl(var(--border));
}
.bg-background {
  background-color: hsl(var(--background));
}
.text-foreground {
  color: hsl(var(--foreground));
}

/* PRIMARY */
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }

/* SECONDARY */
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }

/* DESTRUCTIVE */
.bg-destructive { background-color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }

/* MUTED */
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }

/* ACCENT */
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }

/* POPOVER */
.bg-popover { background-color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }

/* CARD */
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }

/* ============================================================
   GREEN PALETTE
============================================================ */
.text-green-1 { color: #003223; }
.bg-green-1 { background-color: #003223; }
.border-green-1 { border-color: #003223; }

.text-green-3 { color: #C8F55A; }
.bg-green-3 { background-color: #C8F55A; }

/* ============================================================
   ORANGE PALETTE
============================================================ */
.text-orange-1 { color: #FF6400; }
.bg-orange-1 { background-color: #FF6400; }

.text-orange-2 { color: #F2E1C5; }
.bg-orange-2 { background-color: #F2E1C5; }
.border-orange-2 { border-color: #F2E1C5; }

.text-orange-3 { color: #F5EBE1; }
.bg-orange-3 { background-color: #F5EBE1; }

/* ============================================================
   BORDER RADIUS (tokens)
============================================================ */
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

/* ============================================================
   KEYFRAMES (Accordion)
============================================================ */
@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

/* ============================================================
   ANIMATIONS
============================================================ */
.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}
.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* ============================================================
   CONTAINER
============================================================ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}