@import "tailwindcss";

@theme {
  --color-bg: var(--color-bg);
  --color-surface: var(--color-surface);
  --color-text: var(--color-text);
  --color-text-muted: var(--color-text-muted);
  --color-accent: var(--color-accent);
  --color-accent-hover: var(--color-accent-hover);
  --color-heading: var(--color-heading);
  --color-border: var(--color-border);
  --color-success: var(--color-success);
  --color-error: var(--color-error);
}

/* Clean black & white palette — high contrast, timeless */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-accent: #000000;
  --color-accent-hover: #333333;
  --color-heading: #000000;
  --color-border: #e5e5e5;
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* Logo colors: black on white (light mode) */
  --logo-bg: #ffffff;
  --logo-fg: #111111;
}

.dark {
  --color-bg: #000000;
  --color-surface: #0a0a0a;
  --color-text: #f5f5f5;
  --color-text-muted: #a3a3a3;
  --color-accent: #ffffff;
  --color-accent-hover: #e5e5e5;
  --color-heading: #ffffff;
  --color-border: #262626;
  --color-success: #22c55e;
  --color-error: #ef4444;

  /* Logo colors: white on black (dark mode) */
  --logo-bg: #111111;
  --logo-fg: #ffffff;
}

/* Invert logo SVG for dark mode — the SVG uses black fills, so invert makes it white */
.dark .logo img {
  filter: invert(1);
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  p {
    line-height: 1.7;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }

  a:hover {
    color: var(--color-accent);
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-none border border-[var(--color-heading)] bg-[var(--color-heading)] px-8 py-3 font-medium text-[var(--color-bg)] transition-all hover:bg-transparent hover:text-[var(--color-heading)];
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-none border border-[var(--color-border)] px-8 py-3 font-medium transition-all hover:border-[var(--color-heading)] hover:text-[var(--color-heading)];
  }

  /* Hero CTAs on dark photography */
  .btn-hero-primary {
    @apply inline-flex items-center justify-center border border-white bg-white px-8 py-3.5 font-medium text-black transition-all hover:bg-transparent hover:text-white;
  }

  .btn-hero-secondary {
    @apply inline-flex items-center justify-center border border-white/50 bg-transparent px-8 py-3.5 font-medium text-white transition-all hover:border-white hover:bg-white/10;
  }

  /* Force logo mark to white when sitting on dark hero imagery */
  .logo-on-dark .logo img {
    filter: invert(1);
  }

  .input {
    @apply w-full border-b border-[var(--color-border)] bg-transparent py-3 text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] transition-colors focus:border-[var(--color-heading)] focus:outline-none;
  }

  .textarea {
    @apply w-full border-b border-[var(--color-border)] bg-transparent py-3 text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] transition-colors focus:border-[var(--color-heading)] focus:outline-none min-h-[120px] resize-y;
  }

  .honeypot-hidden {
    display: none;
  }
}

/* Logo uses currentColor so it follows the theme automatically.
   We set the color to the heading token so it is black in light, white in dark. */
.logo {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-heading);
}

@layer utilities {
  .container-xl {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  @media (min-width: 64rem) {
    .container-xl {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }

  .skip-to-content {
    position: absolute;
    left: 1rem;
    top: -9999px;
    z-index: 50;
    border: 1px solid var(--color-heading);
    background-color: var(--color-heading);
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--color-bg);
    transition: top 0.15s ease;
  }

  .skip-to-content:focus {
    top: 1rem;
  }
}
