/*
  Design tokens — values sourced from brand/copenhagen-bureau-brand-guidelines.md v1.0.
  Do not introduce a value here that isn't in that document. Semantic tokens (--cb-color-text,
  etc.) exist so components reference meaning, not raw hex — see CLAUDE.md "Keeping the
  guidelines current".
*/

:root {
  /* Colour — raw palette (guidelines §3) */
  --cb-color-ink: #1c1c1a;
  --cb-color-graphite: #6b6a65;
  --cb-color-line: #e3e2dc;
  --cb-color-paper: #faf9f5;
  --cb-color-white: #ffffff;

  /* Colour — semantic aliases */
  --cb-color-text: var(--cb-color-ink);
  --cb-color-text-secondary: var(--cb-color-graphite);
  --cb-color-border: var(--cb-color-line);
  --cb-color-bg: var(--cb-color-paper);
  --cb-color-surface-raised: var(--cb-color-white);
  --cb-color-bg-inverse: var(--cb-color-ink);
  --cb-color-text-inverse: var(--cb-color-paper);

  /* No --cb-color-accent token: reverted back to Option A (pure monochrome). Midnight
     was tried for the capability ring's circles and reverted — see context/BRAND.md
     and the guidelines' Accent section. Do not add an accent token without updating
     both of those first. */

  /* Typography — families (guidelines §4) */
  --cb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-font-serif-italic: "Playfair Display", Georgia, serif;
  --cb-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Typography — weights (only 300/400/500/600 are permitted) */
  --cb-weight-light: 300;
  --cb-weight-regular: 400;
  --cb-weight-medium: 500;
  --cb-weight-semibold: 600;

  /* Typography — scale (size / line-height / letter-spacing per role, guidelines §4 table) */
  --cb-text-display-size: clamp(2.75rem, 2.1rem + 3vw, 4.5rem); /* 48–72px */
  --cb-text-display-leading: 1;
  --cb-text-display-tracking: -0.035em;

  --cb-text-page-heading-size: clamp(2rem, 1.6rem + 1.8vw, 2.5rem); /* 32–40px */
  --cb-text-page-heading-leading: 1.05;
  --cb-text-page-heading-tracking: -0.03em;

  --cb-text-section-heading-size: 1.5rem; /* 24px, fixed per spec */
  --cb-text-section-heading-leading: 1.2;
  --cb-text-section-heading-tracking: -0.02em;

  --cb-text-subheading-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem); /* 19–20px */
  --cb-text-subheading-leading: 1.3;
  --cb-text-subheading-tracking: -0.01em;

  --cb-text-body-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16–17px */
  --cb-text-body-leading: 1.7;
  --cb-text-body-tracking: 0em;

  --cb-text-small-size: 0.875rem; /* 14px, fixed per spec */
  --cb-text-small-leading: 1.6;
  --cb-text-small-tracking: 0em;

  --cb-text-label-size: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem); /* 11–12px */
  --cb-text-label-leading: 1.4;
  --cb-text-label-tracking: 0.16em;

  --cb-text-metadata-size: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem); /* 10–11px */
  --cb-text-metadata-leading: 1.4;
  --cb-text-metadata-tracking: 0.1em;

  /* Wordmark-specific (guidelines §2) — kept even though v1 ships the wordmark as an <img>,
     so a future live-text fallback (e.g. reversed footer mark) can reuse these. */
  --cb-wordmark-leading: 1.03;
  --cb-wordmark-tracking: -0.01em;

  --cb-measure-body: 70ch; /* "never exceeds 70 characters per line" */

  /* Spacing — 8px-based scale. Implementation default for "strong grid", not itself a value
     stated in the brand guidelines. */
  --cb-space-1: 0.25rem; /* 4px */
  --cb-space-2: 0.5rem; /* 8px */
  --cb-space-3: 1rem; /* 16px */
  --cb-space-4: 1.5rem; /* 24px */
  --cb-space-5: 2rem; /* 32px */
  --cb-space-6: 3rem; /* 48px */
  --cb-space-7: 4rem; /* 64px */
  --cb-space-8: 6rem; /* 96px */
  --cb-space-9: 8rem; /* 128px */

  /* Shared section-to-section spacing — the one value every major landing-
     page section boundary (hero/capabilities/selected-work/process/faq/
     contact/footer) reads its own top/bottom contribution from, so the
     whole page's rhythm lives in one place. Each side of a boundary
     contributes exactly this value, so the total visible gap between two
     sections is 2× it: 96px = 192px total at desktop (a 25% reduction from
     the previous 128px/256px), 64px = 128px total at tablet, 48px = 96px
     total at mobile — reusing the existing --cb-space-8/-7/-6 steps rather
     than introducing new one-off numbers. Responsive overrides live here,
     not per-section, so a future section only ever needs to reference
     var(--cb-section-gap) once to inherit the same rhythm automatically. */
  --cb-section-gap: var(--cb-space-6);

  /* Introductory body copy -> CTA gap — the deliberate breathing space
     between a section's supporting paragraph and a CTA sitting directly
     beneath it, for sections where that CTA should read as clearly
     separated from the paragraph rather than tucked underneath it. This is
     a different (larger) convention from --cb-space-4's own "tight" copy-
     to-CTA gap used inside compact copy blocks like .feature-panel__copy —
     both are legitimate, deliberate choices for different contexts, not a
     duplicate of the same value. 24px base (mobile/tablet), 28px from the
     site's main tablet->desktop breakpoint (50.0625rem, same one
     .feature-panel switches on) — reusable by any future section that
     wants this same relationship. */
  --cb-copy-cta-gap: var(--cb-space-4); /* 24px */

  /* Layout — fixed edge margins, not a centered max-width column: content sits a fixed
     distance from the true page edge at any viewport width (100px left / 70px right),
     matching the header nav's own fixed edge distance. Individual elements (H1, body
     copy) cap their own line length via ch-based max-width, so this doesn't risk
     unbounded line length on wide screens. */
  --cb-edge-inset-start: 100px;
  --cb-edge-inset-end: 90px; /* was 70px — a bit more breathing room on the right edge */

  /* Surfaces — guidelines §5 quick reference: "4px everywhere", "0.5px hairline", "no shadows" */
  --cb-radius: 4px;
  /* CTA buttons/pills only — a documented exception to "4px everywhere", see the
     guidelines' Surfaces section. 4px read as effectively sharp at button size. */
  --cb-radius-button: 8px;
  --cb-border-width: 0.5px;
  --cb-shadow: none;

  /* Corner-radius family — consolidated from the site's existing, already-graduated
     tiers (global design-consistency pass) so every "large panel / feature card /
     standard card / dialog / pill / input" instance sitewide reads from one place
     instead of repeating the same literal px value in each file. Values are the
     ones already in production use, unchanged — this only removes duplication,
     it does not resize anything. Deliberately NOT one single radius: a large
     full-bleed panel, a compact feature card and a form input are different
     component families with different proportions, and forcing them to share one
     number would look wrong at their respective sizes. */
  --cb-radius-panel: 32px; /* full-bleed feature panels, e.g. the Les Clés de Charlotte card */
  --cb-radius-feature: 28px; /* large feature cards (e.g. AI & Workflows system cards) */
  --cb-radius-card: 20px; /* standard compact cards reusing the Les Clés surface tint */
  --cb-radius-modal: 24px; /* dialogs, drawers-with-corners, calendar embeds */
  --cb-radius-input: 14px; /* form fields */
  --cb-radius-pill: 999px; /* fully rounded pills/toggles */

  /* Motion — minimal and functional (context/BRAND.md "Motion — Provisional") */
  --cb-duration-fast: 150ms;
  --cb-duration-base: 400ms;
  --cb-duration-slow: 600ms;
  --cb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* --cb-section-gap responsive tiers — same two breakpoints used sitewide for
   every other two/three-tier responsive component (e.g. the Selected Work
   feature panel), so this stays on the same rhythm rather than introducing
   its own breakpoint scheme. */
@media (min-width: 50.0625rem) {
  :root {
    --cb-section-gap: var(--cb-space-7);
    /* Desktop tier of --cb-copy-cta-gap — 28px doesn't land on an existing
       --cb-space-N step (24px/32px bracket it), so it's set directly here
       rather than forcing a mismatched token onto this one relationship. */
    --cb-copy-cta-gap: 1.75rem; /* 28px */
  }
}

@media (min-width: 80rem) {
  :root {
    --cb-section-gap: var(--cb-space-8);
  }
}

/* Large-screen continuation (V-1, docs/FINAL_VISUAL_REVIEW.md) —
   --cb-text-page-heading-size's own clamp tops out at 40px by ~800px
   viewport width and never grows again through 1920px+, so primary page
   headings (Expertise, Contact's guided-flow steps, etc.) lose presence on
   genuinely large displays. This tier only takes effect above the site's
   normal desktop tier (90rem/1440px, one step past the 80rem tier above)
   and is a fluid clamp continuing the same growth curve to 46px by
   1920px — 1440px and below are completely unaffected; the approved
   32/40px etc. sizes at every smaller breakpoint are untouched. */
@media (min-width: 90rem) {
  :root {
    --cb-text-page-heading-size: clamp(2.5rem, 1.375rem + 1.25vw, 2.875rem); /* 40–46px */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cb-duration-fast: 0ms;
    --cb-duration-base: 0ms;
    --cb-duration-slow: 0ms;
  }
}