@import "tailwindcss";

@theme {
  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    var(--font-geist-mono), ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Brand accent — pulled from Hadlock Pond: pine + water teal */
  --color-brand-200: #99f6e4;
  --color-brand-300: #5eead4;
  --color-brand-400: #2dd4bf;
  --color-brand-500: #14b8a6;
  --color-brand-600: #0d9488;

  /* Ink — near-black backgrounds with a cool cast */
  --color-ink-950: #060a10;
  --color-ink-900: #0a1019;
  --color-ink-850: #0e1521;
  --color-ink-800: #131c2b;
  --color-ink-700: #1b2637;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-ink-950);
  color: #dbe4f0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: color-mix(in oklab, var(--color-brand-400) 35%, transparent);
  color: #ffffff;
}

/* Faint technical grid used behind the hero */
.bg-grid {
  background-image:
    linear-gradient(
      to right,
      color-mix(in oklab, #ffffff 4%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in oklab, #ffffff 4%, transparent) 1px,
      transparent 1px
    );
  background-size: 56px 56px;
}
