@import "tailwindcss";

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("@fontsource-variable/inter/files/inter-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("@fontsource-variable/space-grotesk/files/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
}

/* Phokus brand tokens — near-black surfaces, hairline edges, one amber accent
   (the iris focal point). Borrowed from the app, not copied literally. */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;

  --color-canvas: #0a0b0d;
  --color-surface: #0f1116;
  --color-surface-2: #161922;
  --color-edge: #ffffff14;
  --color-edge-strong: #ffffff2b;
  --color-ink: #e8e9ec;
  --color-muted: #9a9ca3;
  --color-faint: #6b6e76;
  --color-amber: #e6a23c;
  --color-amber-soft: #f0bd6f;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 4px;
}

@media (max-width: 63.999rem) {
  section[id] {
    scroll-margin-top: 6.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}