/*
 * Bloom Design system tokens preserved from the React/Tailwind implementation.
 * The PHP frontend uses these same values for its shared visual language.
 */
:root {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 3px;
  --radius-3xl: 4px;
  --radius-4xl: 4px;
  --font-display: "Jost", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.988 0.003 85);
  --foreground: oklch(0.235 0.006 65);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.235 0.006 65);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.235 0.006 65);
  --primary: oklch(0.235 0.006 65);
  --primary-foreground: oklch(0.985 0.004 85);
  --secondary: oklch(0.958 0.006 85);
  --secondary-foreground: oklch(0.235 0.006 65);
  --muted: oklch(0.955 0.006 85);
  --muted-foreground: oklch(0.535 0.009 70);
  --accent: oklch(0.578 0.062 55);
  --accent-foreground: oklch(0.985 0.004 85);
  --destructive: oklch(0.51 0.16 25);
  --destructive-foreground: oklch(0.985 0.004 85);
  --border: oklch(0.897 0.006 80);
  --input: oklch(0.897 0.006 80);
  --ring: oklch(0.578 0.062 55);
  --ivory: oklch(0.968 0.008 82);
  --stone: oklch(0.915 0.008 78);
  --graphite: oklch(0.33 0.006 70);
  --clay: oklch(0.578 0.062 55);
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.display-xl { font: 300 clamp(2.6rem, 7vw, 6rem)/.98 var(--font-display); letter-spacing: -.035em; }
.display-lg { font: 300 clamp(2rem, 4.4vw, 3.6rem)/1.02 var(--font-display); letter-spacing: -.03em; }
.display-md { font: 300 clamp(1.5rem, 2.6vw, 2.25rem)/1.08 var(--font-display); letter-spacing: -.025em; }
.link-underline { position: relative; display: inline-block; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.media-zoom:hover img { transform: scale(1.05); }