@import "tailwindcss";

@theme {
  --color-primary: #0b4035;
  --color-primary-foreground: #f6f7f2;
  --color-secondary: #e6e9de;
  --color-secondary-foreground: #0b4035;
  --color-accent: #d5e64d;
  --color-accent-foreground: #0b4035;
  --color-background: #f6f7f2;
  --color-foreground: #0b4035;
  --color-muted: #eaece4;
  --color-muted-foreground: #4a5c54;
  --color-card: #ffffff;
  --color-card-foreground: #0b4035;
  --color-border: #e0e4d7;
  --color-ocean: #345a8a;
  --color-ocean-soft: #e1e9f4;
  --color-teal: #207a78;
  --color-teal-soft: #ddf0ee;
  --color-terra: #a95036;
  --color-terra-soft: #f6e3db;
  --color-citron: #d5e64d;
  --color-citron-soft: #f3f8d2;
  --font-sans: "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Courier New", monospace;
}

@layer base {
  :root {
    --background: #f6f7f2;
    --foreground: #0b4035;
    --muted: #eaece4;
    --muted-foreground: #4a5c54;
    --card: #ffffff;
    --card-foreground: #0b4035;
    --primary: #0b4035;
    --primary-foreground: #f6f7f2;
    --secondary: #e6e9de;
    --secondary-foreground: #0b4035;
    --accent: #d5e64d;
    --accent-foreground: #0b4035;
    --border: #e0e4d7;
    --font-sans: "Outfit", "Helvetica Neue", system-ui, sans-serif;
    --font-serif: "Instrument Serif", Georgia, serif;
    --font-mono: "Courier New", monospace;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    font-family: var(--font-sans);
    color: #0b4035;
    background-color: #f6f7f2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    width: 100%;
    min-height: 100vh;
    touch-action: manipulation;
    color: #0b4035;
    background-color: #f6f7f2;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    color: #0b4035;
  }

  /* Clear, accessible keyboard focus rings */
  *:focus-visible {
    outline: 2px solid #0b4035;
    outline-offset: 2px;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

.serif-accent {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  font-style: italic;
  font-weight: 400;
}

/* Subtle, tasteful background mesh */
.mesh {
  background: radial-gradient(35rem 25rem at 85% 10%, rgba(213, 230, 77, 0.22), rgba(0,0,0,0) 65%),
              radial-gradient(28rem 22rem at 5% 30%, rgba(32, 122, 120, 0.12), rgba(0,0,0,0) 65%),
              radial-gradient(28rem 20rem at 60% 100%, rgba(52, 90, 138, 0.08), rgba(0,0,0,0) 65%);
}

.lift {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}

.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(11, 64, 53, 0.12);
}

/* Color palettes */
.bg-ocean { color: #fff; background-color: #345a8a; }
.bg-ocean-soft { background-color: #e1e9f4; }
.text-ocean { color: #345a8a; }

.bg-teal { color: #fff; background-color: #207a78; }
.bg-teal-soft { background-color: #ddf0ee; }
.text-teal { color: #207a78; }

.bg-terra { color: #fff; background-color: #a95036; }
.bg-terra-soft { background-color: #f6e3db; }
.text-terra { color: #a95036; }

.bg-citron-soft { background-color: #f3f8d2; }
.bg-accent { background-color: #d5e64d; }
.text-accent-foreground { color: #0b4035; }

.bg-primary { background-color: #0b4035; }
.text-primary-foreground { color: #f6f7f2; }

.bg-card { background-color: #ffffff; }
.bg-background { background-color: #f6f7f2; }
.bg-secondary { background-color: #e8ece2; }
.border-border { border-color: #e0e4d7; }
.text-foreground { color: #0b4035; }
.text-muted-foreground { color: #4a5c54; }

/* Custom scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}