/* utilities.css
   Tokens + base reset + low-level utilities.
   Values are derived from the React source-of-truth in `src/index.css`.
*/

:root {
  --background: 0 0% 100%;
  --foreground: 150 20% 10%;

  --card: 0 0% 100%;
  --card-foreground: 150 20% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 150 20% 10%;

  --primary: 120 56% 24%;
  --primary-foreground: 0 0% 100%;

  --secondary: 122 39% 49%;
  --secondary-foreground: 0 0% 100%;

  --muted: 120 10% 96%;
  --muted-foreground: 120 5% 40%;

  --accent: 207 63% 47%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 120 10% 90%;
  --input: 120 10% 90%;
  --ring: 120 56% 24%;

  --radius: 0.5rem;

  --hero-gradient: linear-gradient(
    135deg,
    hsl(120 56% 24%) 0%,
    hsl(122 39% 49%) 50%,
    hsl(207 63% 47%) 100%
  );
  --overlay-dark: linear-gradient(
    180deg,
    hsla(120 56% 10% / 0.7) 0%,
    hsla(120 56% 10% / 0.5) 100%
  );

  --surface-warm: 40 20% 97%;
  --surface-green: 120 20% 96%;

  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-700.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/playfair-display-800.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0;
}

p {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Low-level utility helpers (kept intentionally small). */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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