/* =============================================================
   Bello Homes — The Bello Folio
   Canonical design tokens and self-hosted type for the public
   stays funnel. Daylight-only by design.
   ============================================================= */

/* Local latin subsets. Keep these URLs stable: the matching HTML
   preloads use the same paths so each face is fetched only once. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: normal;
  font-display: swap;
  src: url('fonts/fraunces-var-roman-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: normal;
  font-display: swap;
  src: url('fonts/fraunces-var-italic-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: normal;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url('fonts/plexmono-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url('fonts/plexmono-500-latin.woff2') format('woff2');
}

:root {
  /* Layer 1 — palette primitives. The ink scale deliberately holds
     both current funnel dialects: warm ledger ink and navy editorial
     ink. This keeps P2 pixel-stable while giving P3+ one namespace. */
  --flo-paper-0: #fdf9f3;
  --flo-paper-1: #faf5eb;
  --flo-paper-2: #f8efde;
  --flo-paper-3: #f4ead6;

  --flo-ink-0: #1c1812;
  --flo-ink-1: #4a443a;
  --flo-ink-2: #0a1520;
  --flo-ink-3: #1c2a3a;

  --flo-brass-300: #e8d0ab;
  --flo-brass-500: #c9a06a;
  --flo-brass-700: #8a6a3d;

  --flo-success: #4f8a4f;
  --flo-warn: #b07a2c;
  --flo-danger: #a14040;
  --flo-info: #3a6fa0;
  --flo-strike: #8e3b2f;
  --flo-hold: #b46b26;

  /* Layer 2 — semantic roles. */
  --flo-bg: var(--flo-paper-1);
  --flo-surface: var(--flo-paper-0);
  --flo-text: var(--flo-ink-0);
  --flo-text-soft: var(--flo-ink-1);
  --flo-accent: var(--flo-brass-500);
  --flo-line: color-mix(in srgb, var(--flo-ink-0) 8%, transparent);
  --flo-focus-ring: var(--flo-brass-700);

  /* Layer 3 — type, geometry, elevation, and motion roles. */
  --flo-font-display: 'Fraunces', Georgia, serif;
  --flo-font-body: 'Inter', -apple-system, sans-serif;
  --flo-font-ledger: 'IBM Plex Mono', ui-monospace, monospace;

  --flo-text-xs: 0.66rem;
  --flo-text-sm: 0.78rem;
  --flo-text-base: 0.92rem;
  --flo-text-lg: 1.05rem;
  --flo-text-xl: 1.3rem;
  --flo-text-2xl: 2rem;
  --flo-text-3xl: 3rem;

  --flo-space-1: 0.25rem;
  --flo-space-2: 0.5rem;
  --flo-space-3: 0.75rem;
  --flo-space-4: 1rem;
  --flo-space-5: 1.5rem;
  --flo-space-6: 2rem;
  --flo-space-7: 3rem;
  --flo-space-8: 4rem;

  --flo-radius-sm: 10px;
  --flo-radius-md: 14px;
  --flo-radius-lg: 22px;

  --flo-shadow-1: 0 4px 14px rgba(10, 22, 40, 0.06);
  --flo-shadow-2: 0 24px 50px -22px rgba(10, 22, 40, 0.32);

  --flo-dur-1: 160ms;
  --flo-dur-2: 320ms;
  --flo-dur-3: 640ms;
  --flo-ease: cubic-bezier(.22, .61, .36, 1);
}