/* CityScroll design language — single token sheet, loaded on every page. Component CSS consumes the
   role-based tokens below; pages must not hard-code a value a token names. Cool neutral ground + one
   action blue + scoped status hues; every foreground token meets WCAG 2.2 AA and --rule-strong
   clears 3:1 non-text for form controls. Full rationale + scale: docs/design-language.md. */
:root {
  /* Neutral primitives (cool near-white ground → near-black ink). */
  --cs-white: #ffffff;
  --cs-n-25: #f5f6f8;
  --cs-n-50: #eceef2;
  --cs-n-100: #dde1e7;
  --cs-n-300: #7a828f;
  --cs-n-500: #5b6470;
  --cs-n-700: #37414d;
  --cs-n-900: #12181f;

  /* Action + identity blues, and their quiet tints. */
  --cs-action: #1a44e0;
  --cs-action-hover: #10259e;
  --cs-action-tint: #eef2ff;
  --cs-action-tint-border: #c9d5ff;
  --cs-brand-navy: #1b3a8f;

  /* Status: text-safe hue + tint + border, used only to mean their state. */
  --cs-success: #1a6b34;
  --cs-success-tint: #e7f4ec;
  --cs-success-border: #b6ddc3;
  --cs-caution: #8a5a00;
  --cs-caution-tint: #fbf1d8;
  --cs-caution-border: #e6c88a;
  --cs-danger: #c01829;
  --cs-danger-tint: #fdeaec;
  --cs-danger-border: #f2b8bd;

  /* Semantic color tokens — the layer component CSS should reference. */
  --color-canvas: var(--cs-n-25);
  --color-canvas-subtle: var(--cs-n-50);
  --color-surface: var(--cs-white);
  --color-text: var(--cs-n-900);
  --color-text-soft: var(--cs-n-700);
  --color-text-muted: var(--cs-n-500);
  --color-border: var(--cs-n-100);
  --color-border-strong: var(--cs-n-300);
  --color-brand: var(--cs-brand-navy);
  --color-action: var(--cs-action);
  --color-action-hover: var(--cs-action-hover);
  --color-caution: var(--cs-caution);
  --color-success: var(--cs-success);
  --color-danger: var(--cs-danger);

  /* Compatibility aliases: existing component CSS references these short names site-wide. */
  --paper: var(--color-canvas);
  --paper-2: var(--color-canvas-subtle);
  --card: var(--color-surface);
  --ink: var(--color-text);
  --ink-soft: var(--color-text-soft);
  --muted: var(--color-text-muted);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-strong);
  --blue: var(--color-brand);
  --oxblood: var(--color-action);
  --rose: var(--color-action);
  --amber: var(--color-caution);
  --green: var(--color-success);
  --shadow: none; /* flat: hairlines and spacing carry structure, nothing floats */

  /* Type: modern-civic grotesk display + humanist sans text. Both open, one font host. */
  --font-brand: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-reading: "Noto Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-label: var(--font-reading);
  --font-interface: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-nameplate: var(--font-brand);
  --font-display: var(--font-brand);
  --font-body: var(--font-reading);
  --font-sc: var(--font-label);
  --ui: var(--font-interface);

  /* Spacing (8-based proximity scale), measure, container, and shape. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --measure: 72ch;
  --maxw: 1120px;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-pill: 999px;
}

body {
  accent-color: var(--color-action);
}

.brand-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-brand);
}

.brand-lockup--masthead {
  gap: clamp(var(--space-3), 2vw, var(--space-5));
}

.brand-mark,
.cr-seal {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: currentColor;
}

.brand-lockup--masthead .brand-mark {
  width: clamp(48px, 7vw, 68px);
  height: clamp(48px, 7vw, 68px);
}

.brand-lockup .cr-title {
  color: currentColor;
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
}

.brand-lockup--masthead .cr-title {
  margin: 0;
  font-size: clamp(2.6rem, 7.2vw, 4.6rem);
  line-height: .92;
}

.home.brand-lockup {
  gap: var(--space-2);
}

.home.brand-lockup .brand-mark {
  width: 34px;
  height: 34px;
}

.home.brand-lockup:hover {
  color: var(--color-action);
}

.cr-rule--top,
header > .cr-rule:first-child {
  border-color: var(--color-brand);
}

@media (max-width: 420px) {
  .brand-lockup--masthead {
    gap: var(--space-2);
  }

  .brand-lockup--masthead .brand-mark {
    width: 44px;
    height: 44px;
  }
}