/**
 * Focus City Guide — public design foundations.
 *
 * Scope: the standalone public document only. The --focus-* aliases remain
 * deliberately for the existing public presentation while phases 1.3B+ move
 * components onto the canonical --fcg-* vocabulary.
 */
@font-face {
  font-family: "Focus Larken";
  src: url("./fonts/larken/larken_regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

.fcg-public-body {
  /* Colour roles — paper and ink carry the identity; green is functional. */
  --fcg-paper: #F7F5F0;
  --fcg-ink: #171917;
  --fcg-surface: #ffffff;
  --fcg-muted: #555A53;
  --fcg-rule: #D8D5CE;
  --fcg-border: var(--fcg-rule);
  --fcg-green: #3c4a3a;
  --fcg-accent: var(--fcg-green);
  --fcg-accent-soft: var(--fcg-soft);
  --fcg-soft: #e9e9e1;
  --fcg-dark: var(--fcg-ink);
  --fcg-card-2: var(--fcg-soft);
  --fcg-state-error: #8f332f;
  --fcg-state-warning: #88580b;
  --fcg-state-success: #17663f;

  /* Compatibility names used by the existing public presentation. */
  --fcg-bg: var(--fcg-paper);
  --fcg-text: var(--fcg-ink);
  --fcg-ink-muted: var(--fcg-muted);
  --fcg-editorial-green: var(--fcg-green);
  --fcg-clay: var(--fcg-green);

  /* Spatial scale — no component-level magic numbers for normal rhythm. */
  --fcg-space-0: .25rem;
  --fcg-space-1: .5rem;
  --fcg-space-1-5: .75rem;
  --fcg-space-2: 1rem;
  --fcg-space-3: 1.5rem;
  --fcg-space-4: 2rem;
  --fcg-space-5: clamp(3rem, 5vw, 6rem);
  --fcg-space-6: clamp(4rem, 7vw, 9rem);
  --fcg-space-7: clamp(6rem, 10vw, 12rem);
  --fcg-section-space: var(--fcg-space-6);

  /* Containers and 12-column editorial grid. */
  --fcg-container: 80rem;
  --fcg-container-wide: 80rem;
  --fcg-width-main: min(var(--fcg-container), calc(100% - 2 * var(--fcg-gutter)));
  --fcg-width-wide: min(var(--fcg-container-wide), calc(100% - 2 * var(--fcg-gutter)));
  --fcg-container-reading: 43.75rem;
  --fcg-gutter: 2rem;
  --fcg-grid-columns: 12;
  --fcg-grid-gap: clamp(1rem, 1.7vw, 2rem);

  /* Typography: Larken narrates; Space Grotesk explains. */
  --fcg-font-editorial: "Focus Larken", Georgia, serif;
  --fcg-font-ui: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fcg-font-display: var(--fcg-font-editorial);
  --fcg-type-display-xl: clamp(5rem, 10vw, 10rem);
  --fcg-type-display: clamp(3.5rem, 7.5vw, 7rem);
  --fcg-type-h1: clamp(2.375rem, 4.45vw, 4rem);
  --fcg-type-h2: clamp(1.75rem, 2.8vw, 2.5rem);
  --fcg-type-h3: clamp(1.375rem, 2vw, 1.5625rem);
  --fcg-type-editorial: clamp(2rem, 3.5vw, 3.25rem);
  --fcg-type-deck: clamp(1.125rem, 1.55vw, 1.5rem);
  --fcg-type-body: 1rem;
  --fcg-type-ui-title: .875rem;
  --fcg-type-ui-body: .875rem;
  --fcg-type-meta: .75rem;
  --fcg-type-label: .75rem;
  --fcg-type-caption: .75rem;
  --fcg-text-xs: var(--fcg-type-label);
  --fcg-text-sm: var(--fcg-type-ui-body);
  --fcg-text-body: var(--fcg-type-body);
  --fcg-text-lg: var(--fcg-type-deck);
  --fcg-text-h3: var(--fcg-type-h3);
  --fcg-text-h2: var(--fcg-type-h2);
  --fcg-text-h1: var(--fcg-type-h1);
  --fcg-line-display: 1.05;
  --fcg-line-tight: 1.06;
  --fcg-line-body: 1.65;
  --fcg-tracking-display: -.015em;
  --fcg-tracking-title: -.01em;
  --fcg-tracking-label: .065em;

  /* Borders, media, motion and interaction. */
  --fcg-hairline: 1px;
  --fcg-radius-control: 0;
  --fcg-radius-panel: 0;
  --fcg-image-hero: 4 / 5;
  --fcg-image-feature: 3 / 2;
  --fcg-image-card: 3 / 2;
  --fcg-image-issue: 5 / 6;
  --fcg-image-portrait: 4 / 5;
  --fcg-image-mini: 4 / 5;
  --fcg-motion-fast: 180ms;
  --fcg-motion-base: 180ms;
  --fcg-ease: cubic-bezier(.2, .6, .3, 1);
  --fcg-focus-ring: 2px solid var(--fcg-green);
  --fcg-focus-offset: 4px;
  --fcg-mobile-nav-height: 0rem;

  /* Legacy aliases — retain until the pages move onto the canonical tokens. */
  --focus-font-editorial: var(--fcg-font-editorial);
  --focus-font-ui: var(--fcg-font-ui);
  --focus-paper: var(--fcg-paper);
  --focus-ink: var(--fcg-ink);
  --focus-muted: var(--fcg-muted);
  --focus-line: var(--fcg-rule);
  --focus-accent: var(--fcg-accent-soft);
  --focus-sea: var(--fcg-green);
  --focus-dark: var(--fcg-dark);
  --focus-container-xl: var(--fcg-container-wide);
  --focus-container: var(--fcg-container);
  --focus-gutter: var(--fcg-gutter);
  --focus-grid-gap: var(--fcg-grid-gap);
  --focus-space-section: var(--fcg-section-space);
  --focus-ease-out: var(--fcg-ease);
  --focus-display-xl: var(--fcg-type-display-xl);
  --focus-display-lg: var(--fcg-type-display);
  --focus-display-md: var(--fcg-type-h2);
  --focus-heading-lg: var(--fcg-type-h2);
  --focus-heading-md: var(--fcg-type-h3);
  --focus-body: var(--fcg-type-body);
  --focus-body-lg: var(--fcg-type-deck);
  --focus-meta: var(--fcg-type-meta);
  --focus-leading-display: var(--fcg-line-display);
  --focus-leading-heading: var(--fcg-line-tight);
  --focus-leading-body: var(--fcg-line-body);
  --focus-tracking-display: var(--fcg-tracking-display);
  --focus-tracking-meta: var(--fcg-tracking-label);
  --focus-tracking-ui: 0;
}

@media (max-width: 700px) {
  .fcg-public-body {
    --fcg-gutter: 1.25rem;
    --fcg-section-space: clamp(4rem, 15vw, 5rem);
  }
}