/* ============================================================
   CCC - Design tokens, reset, base typography, utility classes
   Single source of truth. Used by every page.
   ============================================================ */

:root {
  /* Brand colors - from the canonical homepage/cities/library Figma values */
  --color-ink: #162328;
  --color-ink-soft: #2a3a40;
  --color-muted: #5d675f;
  --color-white: #ffffff;
  --color-paper: #f4f6f1;
  --color-line: #e3e8de;

  --color-green: #317a55;
  --color-green-dark: #1f5037;
  --color-green-deep: #02834b;
  --color-lime: #c0d894;
  --color-lime-soft: #dbe8c4;
  --color-magenta: #e50e81;
  --color-magenta-dark: #b6086a;
  --color-sky: #88bfe2;
  --color-sky-soft: #b9d8ec;

  --color-eu-blue: #2864b0;

  /* Typography */
  --font-sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Type scale - fluid via clamp(min, preferred, max) */
  --fs-eyebrow: 0.78rem;
  --fs-tag: 0.85rem;
  --fs-small: 0.92rem;
  --fs-body: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --fs-lede: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h3: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --fs-h1: clamp(2.1rem, 1.45rem + 3.2vw, 5.5rem);
  --fs-h1-display: clamp(2.6rem, 1.45rem + 5.8vw, 7rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Spacing ramp */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Page rhythm - fluid */
  --space-section: clamp(32px, 4vw, 56px);
  --space-section-tight: clamp(18px, 2.4vw, 30px);
  --gutter: clamp(20px, 3vw, 40px);

  /* Containers */
  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 880px;
  --container-prose: 720px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Radius roles */
  --radius-interactive: 4px;
  --radius-panel: 0;
  --radius-media: 0;
  --radius-media-soft: var(--radius-media);
  --radius-card: var(--radius-panel);
  --radius-row: var(--radius-panel);
  --radius-control: var(--radius-pill);

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(22, 35, 40, 0.06);
  --shadow: 0 18px 48px rgba(22, 35, 40, 0.09);
  --shadow-lg: 0 32px 80px rgba(22, 35, 40, 0.14);

  /* Semantic color roles */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-surface: var(--color-white);
  --color-surface-muted: var(--color-paper);
  --color-surface-tint: var(--color-lime);
  --color-border: var(--color-line);
  --color-field-background: var(--color-surface-muted);
  --color-field-background-focus: var(--color-surface);
  --color-field-border: var(--color-border);
  --color-field-border-focus: var(--color-action-alt);
  --color-media-placeholder: #d9d9d9;
  --color-notice-error-background: #fde8f1;
  --color-notice-error-border: #fcc2da;
  --color-action: var(--color-magenta);
  --color-action-hover: var(--color-magenta-dark);
  --color-action-alt: var(--color-green);
  --color-action-alt-hover: var(--color-green-dark);
  --color-on-action: var(--color-white);

  /* Component tokens */
  --button-color-background: var(--color-action);
  --button-color-background-hover: var(--color-action-hover);
  --button-color-border: var(--button-color-background);
  --button-color-text: var(--color-on-action);
  --button-font-size: var(--fs-tag);
  --button-font-weight: var(--weight-bold);
  --button-padding-block: var(--sp-3);
  --button-padding-inline: var(--sp-5);
  --button-radius: var(--radius-interactive);

  --field-padding-block: var(--sp-3);
  --field-padding-inline: var(--sp-4);
  --field-radius: var(--radius-interactive);
  --field-border-width: 1px;
  --form-notice-radius: var(--radius-interactive);
  --contact-panel-background: transparent;
  --contact-panel-radius: var(--radius-panel);
  --contact-panel-padding: clamp(28px, 4vw, 48px);

  --label-color-background: var(--color-surface-muted);
  --label-color-text: var(--color-text);
  --label-font-size: var(--fs-tag);
  --label-font-weight: var(--weight-semibold);
  --label-padding-block: 8px;
  --label-padding-inline: 14px;
  --label-radius: var(--radius-interactive);

  --hero-gap: clamp(24px, 4vw, 56px);
  --hero-media-radius: 0;
  --landing-hero-title-size: clamp(1.82rem, 1.015rem + 4.06vw, 4.9rem);
  --landing-hero-deck-size: clamp(0.92rem, 0.82rem + 0.45vw, 1.05rem);
  --page-intro-title-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  --page-intro-deck-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  --page-intro-title-max-width: 18ch;
  --page-intro-deck-max-width: 56ch;
  --page-intro-copy-column-width: min(56vw, 765px);
  --page-intro-stack-max-width: none;
  --page-intro-text-align: var(--body-copy-align);
  --blog-intro-title-size: clamp(2rem, 1.7rem + 1.2vw, 2.8rem);
  --blog-intro-deck-size: var(--fs-lede);
  --body-copy-align: left;
  --caption-copy-align: center;
  --article-media-gap: var(--sp-3);
  --article-media-radius: var(--radius-media);
  --article-media-caption-color: var(--color-ink-soft);
  --article-media-caption-size: var(--fs-small);
  --article-pullquote-background: var(--color-green-dark);
  --article-pullquote-color: var(--color-white);
  --article-sources-background: var(--color-paper);
  --article-sources-border: var(--color-line);
  --hero-title-size: var(--page-intro-title-size);
  --hero-deck-size: var(--page-intro-deck-size);

  --page-hero-title-size: var(--page-intro-title-size);
  --page-hero-deck-size: var(--page-intro-deck-size);
  --page-hero-max-title-width: var(--page-intro-title-max-width);
  --page-hero-max-deck-width: var(--page-intro-deck-max-width);

  --feature-card-aspect: 596 / 693;
  --feature-card-min-height: clamp(560px, 38vw, 700px);
  --feature-card-panel-ratio: 44%;
  --feature-card-panel-min-height: clamp(260px, 15vw, 340px);
  --feature-card-media-min-height: clamp(260px, 24vw, 420px);
  --feature-card-panel-padding: clamp(20px, 1.8vw, 30px);
  --feature-card-panel-gap: clamp(8px, 0.75vw, 12px);
  --feature-card-label-min-width: 92px;
  --feature-card-label-height: 30px;
  --feature-card-title-size: clamp(1.45rem, 0.95rem + 1.45vw, 2.25rem);
  --feature-card-text-size: clamp(0.92rem, 0.85rem + 0.25vw, 1.05rem);
  --feature-card-text-lines: 3;
  --feature-card-cta-color-background: var(--color-action);
  --feature-card-cta-color-text: var(--color-on-action);

  --flat-card-min-height: clamp(220px, 24vw, 320px);
  --flat-card-compact-min-height: clamp(160px, 16vw, 220px);
  --flat-card-padding-block-end: clamp(72px, 7vw, 92px);
  --flat-card-compact-padding-block-end: clamp(68px, 6vw, 84px);
  --flat-card-title-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  --flat-card-compact-title-size: clamp(1.22rem, 0.95rem + 0.9vw, 1.55rem);

  --news-tile-color-background: var(--color-surface-muted);
  --news-tile-color-background-alt: var(--color-surface-tint);
  --news-tile-media-ratio: 596 / 270;
  --news-tile-min-height: clamp(460px, 33vw, 560px);
  --news-tile-padding: clamp(20px, 2vw, 30px);
  --news-tile-title-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  --news-tile-meta-size: var(--fs-tag);
  --news-tile-cta-color-background: var(--color-action-alt);
  --news-tile-cta-color-background-alt: var(--color-action);
  --news-row-cta-color-background: var(--color-action-alt);
  --news-row-cta-color-background-hover: var(--color-action-alt-hover);
  --news-row-cta-color-text: var(--color-on-action);
  --logo-filter: none;
  --logo-opacity: 1;

  --nav-link-font-size: var(--fs-tag);
  --nav-link-font-weight: var(--weight-regular);
  --menu-button-color-background: var(--color-action-alt);
  --menu-button-color-text: var(--color-on-action);
  --menu-button-radius: var(--radius-interactive);

  --carousel-arrow-size: clamp(40px, 3vw, 48px);
  --carousel-arrow-background: rgba(255, 255, 255, 0.92);
  --carousel-dot-size: 9px;
  --carousel-radius: var(--radius-media);
  --city-carousel-radius: var(--radius-media);

  /* Legacy card aliases */
  --card-aspect: var(--feature-card-aspect);
  --card-min-height: var(--feature-card-min-height);
  --card-panel-ratio: var(--feature-card-panel-ratio);
  --card-panel-min-height: var(--feature-card-panel-min-height);
  --card-media-min-height: var(--feature-card-media-min-height);
  --card-panel-padding: var(--feature-card-panel-padding);
  --card-panel-gap: var(--feature-card-panel-gap);
  --card-tag-min-width: var(--feature-card-label-min-width);
  --card-tag-height: var(--feature-card-label-height);
  --card-title-size: var(--feature-card-title-size);
  --card-text-size: var(--feature-card-text-size);
  --card-text-lines: var(--feature-card-text-lines);
  --card-cta-bg: var(--feature-card-cta-color-background);
  --card-cta-color: var(--feature-card-cta-color-text);

  /* Header height */
  --header-height: 72px;

  /* Single breakpoint set - used everywhere */
  --bp-sm: 560px;
  --bp-md: 900px;
  --bp-lg: 1200px;
}

@media (max-width: 900px) {
  :root {
    --feature-card-min-height: clamp(560px, 72vw, 720px);
    --feature-card-panel-ratio: 44%;
    --feature-card-panel-min-height: clamp(250px, 28vw, 340px);
    --feature-card-media-min-height: clamp(240px, 34vw, 380px);
    --feature-card-panel-padding: clamp(20px, 3vw, 28px);
    --feature-card-title-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
    --feature-card-text-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.05rem);
  }
}

@media (max-width: 560px) {
  :root {
    --fs-h1: 2rem;
    --fs-h1-display: 2.15rem;
    --fs-h2: clamp(1.8rem, 1.45rem + 2vw, 2.2rem);
    --page-intro-title-size: 2rem;
    --page-hero-title-size: var(--page-intro-title-size);
    --landing-hero-title-size: 1.55rem;
    --landing-hero-deck-size: 0.95rem;
    --hero-title-size: var(--page-intro-title-size);
    --feature-card-min-height: auto;
    --feature-card-panel-ratio: 45%;
    --feature-card-panel-min-height: auto;
    --feature-card-media-min-height: clamp(260px, 72vw, 360px);
    --feature-card-panel-padding: 22px;
    --feature-card-title-size: clamp(1.4rem, 1.14rem + 1.7vw, 1.8rem);
    --feature-card-text-size: 0.95rem;
    --flat-card-min-height: clamp(300px, 82vw, 380px);
    --flat-card-compact-min-height: clamp(220px, 56vw, 260px);
    --flat-card-title-size: clamp(1.45rem, 1.2rem + 1.8vw, 1.85rem);
    --flat-card-compact-title-size: clamp(1.2rem, 1.02rem + 1vw, 1.45rem);
  }
}

/* ----------------------------- Reset ----------------------------- */

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

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

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 160ms ease;
}

a:hover,
a:focus-visible {
  color: var(--color-magenta);
}

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

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.2em;
}

figure {
  margin: 0;
}

/* ----------------------------- Typography helpers ----------------------------- */

h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4,
.h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.display {
  font-size: var(--fs-h1-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  margin-bottom: var(--sp-4);
  padding: var(--label-padding-block) var(--label-padding-inline);
  color: var(--label-color-text);
  background: var(--label-color-background);
  border-radius: var(--label-radius);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow--green { color: var(--color-white); background: var(--color-green); }
.eyebrow--magenta { color: var(--color-white); background: var(--color-magenta); }
.eyebrow--sky { color: var(--color-ink); background: var(--color-sky); }
.eyebrow--lime { color: var(--color-ink); background: var(--color-lime); }
.eyebrow--ink { color: var(--color-white); background: var(--color-ink); }

.lede {
  max-width: 60ch;
  color: var(--color-text-muted);
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  font-weight: var(--weight-regular);
}

.prose {
  max-width: var(--container-prose);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose h2 {
  margin-top: 2em;
}

.prose h3 {
  margin-top: 1.6em;
}

.prose a {
  color: var(--color-green);
  font-weight: var(--weight-semibold);
}

.prose img {
  border-radius: var(--radius-media);
  margin: 1.6em 0;
}

/* ----------------------------- Layout primitives ----------------------------- */

.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

.container--wide {
  max-width: var(--container-wide);
  width: min(calc(100% - 2 * var(--gutter)), var(--container-wide));
}

.container--narrow {
  max-width: var(--container-narrow);
  width: min(calc(100% - 2 * var(--gutter)), var(--container-narrow));
}

.container--prose {
  max-width: var(--container-prose);
  width: min(calc(100% - 2 * var(--gutter)), var(--container-prose));
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-section-tight);
}

.section--paper {
  background: var(--color-surface-muted);
}

.section--ink {
  color: var(--color-white);
  background: var(--color-ink);
}

.section--green {
  color: var(--color-white);
  background: var(--color-green);
}

.stack {
  display: grid;
  gap: var(--sp-5);
}

.stack--sm { gap: var(--sp-3); }
.stack--md { gap: var(--sp-5); }
.stack--lg { gap: var(--sp-7); }

/* ----------------------------- Accessibility ----------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  clip: auto;
  color: var(--color-white);
  background: var(--color-ink);
  border-radius: var(--radius-pill);
}

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-interactive);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}