/* ============================================================
   cookfrigo.com — styles
   Design tokens copied from the Frigo app's active theme:
     lib/theme/schemes.ts  (limeZing scheme — the app default)
     lib/oldTheme.ts        (spacing / radius scale)
   The site deliberately uses ONE brand color (teal) + ONE accent
   (lime), a neutral mint/white background, and the system font
   stack to match the app's typographic register (typography.ts
   sets both heading and body families to 'System').
   No frameworks, no build step, no external runtime dependencies.
   ============================================================ */

@font-face {
  /* Outfit (Medium) — self-hosted, copied from the Frigo app
     (assets/fonts/Outfit/static/Outfit-Medium.ttf). The app's logo
     wordmark is rendered in Outfit 500, so the site logo matches. */
  font-family: "Outfit";
  src: url("fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand palette (tealMintSlate scheme, lib/theme/schemes.ts) —
         the app's active logo scheme: teal primary + mint accent --- */
  --color-primary: #0d9488;        /* brand teal — headers/CTAs/logo wordmark */
  --color-primary-press: #0b7d72;  /* darker teal — button hover/active (same hue) */
  --color-primary-light: #ccfbf1;  /* pale teal — icon tiles, subtle fills */
  --color-accent: #34d399;         /* mint — logo hat, focus rings, accents */
  --color-accent-light: #a7f3d0;   /* pale mint */

  /* --- Text (slate ramp) --- */
  --color-text: #0f172a;           /* primary text */
  --color-text-secondary: #475569; /* secondary / body muted (AA-safe) */
  --color-text-tertiary: #94a3b8;  /* decorative only (not for body copy) */

  /* --- Surfaces --- */
  --color-bg: #f8fafc;             /* page background — cool near-white (slate-50) */
  --color-bg-alt: #f1f5f9;         /* alternating section background (slate-100) */
  --color-surface: #ffffff;        /* cards */
  --color-border: #e2e8f0;
  --color-border-medium: #cbd5e1;

  /* --- Spacing scale (lib/oldTheme.ts, 4px base) --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Section rhythm — generous vertical breaks between sections */
  --section-gap: 64px;             /* mobile */

  /* --- Radius (lib/oldTheme.ts) --- */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 999px;

  /* --- Type --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  --maxw: 720px;                   /* content column width */
}

@media (min-width: 768px) {
  :root {
    --section-gap: 96px;           /* desktop */
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--color-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--color-primary);
}

img,
svg {
  display: block;
}

/* Visible keyboard focus everywhere — the accent's primary job */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Honour reduced-motion (smooth scroll is the only motion we use) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-2xl);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 64px;
  padding-top: 14px; /* headroom for the chef hat that rises above the wordmark */
}

/* Logo wordmark reconstructed from components/branding/Logo.tsx:
   lowercase "frigo", teal, weight 600, slight negative tracking,
   with the lime chef-hat mark sitting above the "g". */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: var(--space-sm) 0;
}
.logo__word {
  position: relative;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 30px;
  font-weight: 500;            /* Outfit Medium — matches the app logo */
  letter-spacing: -1px;
  color: var(--color-primary);
  line-height: 1;
}
.logo__g {
  position: relative;
  display: inline-block;
}
/* chefHat2 nestled above the "g": iconSize 27 / fontSize 46 ≈ 0.59em,
   pulled down (the app's iconOffsetY +16) so it sits low on the letter. */
.logo__hat {
  position: absolute;
  left: 50%;
  top: -0.23em;                /* hat height above the "g" (tune in logo-sandbox.html) */
  width: 0.59em;
  height: 0.59em;
  transform: translateX(calc(-50% + 0.044em)); /* nudged slightly right */
  color: var(--color-accent);  /* mint */
}
.logo__hat svg {
  width: 100%;
  height: 100%;
}

.site-header__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-sm) var(--space-xs);
}
.site-header__nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
}

/* ---------- Buttons / CTAs ---------- */
/* Solid teal fill, white label. Label is 19px/700 so white-on-teal
   meets WCAG AA as large text. Min height 48px (>= 44px tap target). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: 0 var(--space-2xl);
  background: var(--color-primary);
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.btn:hover {
  background: var(--color-primary-press);
}
.btn:active {
  background: var(--color-primary-press);
}
.btn .arrow {
  font-weight: 400;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--section-gap) * 0.75);
  padding-bottom: var(--section-gap);
}
.hero__title {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-text);
  max-width: 14ch;
}
.hero__subtitle {
  margin-top: var(--space-xl);
  font-size: clamp(1.125rem, 3.2vw, 1.375rem);
  font-weight: 400;
  color: var(--color-text-secondary);
  max-width: 36ch;
}
.hero__cta {
  margin-top: var(--space-3xl);
}

/* ---------- Generic section ---------- */
.section {
  padding-block: var(--section-gap);
}
.section--alt {
  background: var(--color-bg-alt);
}
.section__intro {
  font-size: clamp(1.125rem, 3vw, 1.3125rem);
  line-height: 1.7;
  color: var(--color-text);
}

/* "What Frigo is" lead paragraph */
.lead {
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 40ch;
}

/* ---------- Capability sections ---------- */
.capabilities {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.capability {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.capability__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.capability__icon svg {
  width: 34px;
  height: 34px;
}
.capability__title {
  font-size: clamp(1.375rem, 4.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.capability__body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 46ch;
}

/* ---------- Access / status ---------- */
.access__title,
.founder__title {
  font-size: clamp(1.625rem, 5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.access__body {
  margin-top: var(--space-lg);
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 46ch;
}
.access__cta {
  margin-top: var(--space-2xl);
}

/* ---------- Founder note ---------- */
.founder__body {
  margin-top: var(--space-2xl);
  max-width: 60ch;
}
.founder__body p {
  margin-bottom: var(--space-xl);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-text);
}
.founder__body p:last-child {
  margin-bottom: 0;
}
/* Mary quote — italic of the app body font (the app typography
   defines no serif family, so we italicise the system sans). */
.founder__quote {
  font-style: italic;
  color: var(--color-text-secondary);
}
.founder__signoff {
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding-block: var(--space-3xl);
}
.site-footer p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.site-footer p + p {
  margin-top: var(--space-sm);
}
.site-footer a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-medium);
}
.site-footer a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.site-footer .sep {
  color: var(--color-text-tertiary);
  padding-inline: var(--space-xs);
}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal {
  padding-block: var(--section-gap);
}
.legal__title {
  font-size: clamp(1.875rem, 6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.legal__updated {
  margin-top: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--color-text-tertiary);
}
.legal__note {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-accent-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}
.legal h2 {
  margin-top: var(--space-3xl);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
}
.legal h2:first-of-type {
  margin-top: var(--space-2xl);
}
.legal p {
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.legal ul {
  margin-top: var(--space-md);
  padding-left: var(--space-2xl);
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.legal li {
  margin-bottom: var(--space-sm);
}
.legal a {
  color: var(--color-primary);
}

/* ---------- Wider screens ---------- */
@media (min-width: 768px) {
  body {
    font-size: 19px;
  }
  .logo__word {
    font-size: 30px;
  }
}