@import "tailwindcss";

@theme {
  --font-sans: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-playfair), ui-serif, Georgia, serif;

  /* Light palette: mirrors the app's `lightColors` (constants/colors.ts). */
  --color-canvas: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f5f9;
  --color-primary: #0f766e;
  --color-primary-light: #ccfbf1;
  --color-primary-button: #0f766e;
  --color-foreground: #0f172a;
  --color-muted-foreground: #64748b;
  --color-border-soft: #e2e8f0;
  --color-success: #047857;
  --color-success-light: #d1fae5;
}

@layer base {
  :root {
    color-scheme: light;
    --grid-line: rgba(15, 23, 42, 0.055);
  }

  /*
   * Dark palette: mirrors the app's `darkColors` (constants/colors.ts).
   * `--color-primary` stays the bright accent (text/icons/borders); filled
   * buttons use the muted `--color-primary-button` so white text keeps its
   * contrast, matching the app's primary vs. primaryButton split.
   */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --color-canvas: #0b1220;
      --color-surface: #1e293b;
      --color-surface-soft: #111827;
      --color-primary: #2dd4bf;
      --color-primary-light: #134e4a;
      --color-primary-button: #115e59;
      --color-foreground: #f1f5f9;
      --color-muted-foreground: #94a3b8;
      --color-border-soft: #334155;
      --color-success: #34d399;
      --color-success-light: #064e3b;
      --grid-line: rgba(45, 212, 191, 0.08);
    }
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-canvas font-sans text-foreground antialiased;
  }
}

.card-hover {
  @apply transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(15,23,42,0.08)];
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out both;
}

.animate-fade-in-up-delay-1 {
  animation: fade-in-up 0.5s ease-out 0.1s both;
}

.animate-fade-in-up-delay-2 {
  animation: fade-in-up 0.5s ease-out 0.2s both;
}

.animate-fade-in-up-delay-3 {
  animation: fade-in-up 0.5s ease-out 0.3s both;
}

/*
 * Branded one-page PDF sheet: a green-to-white gradient washed over a faint
 * teal grid. Only rendered for print (the on-screen page mirrors the homepage).
 */
.print-sheet {
  background:
    linear-gradient(150deg, #ccfbf1 0%, #f0fdfa 30%, #ffffff 64%),
    linear-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, 0.06) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

@media print {
  @page {
    margin: 0.25in;
    size: letter;
  }

  html,
  body {
    background: #ffffff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body {
    color: #0f172a !important;
  }

  .print-hidden {
    display: none !important;
  }

  .print-page {
    max-width: none !important;
    padding: 0 !important;
  }

  .print-page * {
    box-shadow: none !important;
    animation: none !important;
  }

  .print-sheet {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}