/* ==========================================================================
   RCCCD Coming Soon — Global Styles & Design Tokens
   Source of truth: Figma "Safe City" file, node 26:6
   ========================================================================== */

:root {
  /* Color tokens */
  --color-brand: #036c42;
  --color-brand-hover: #025434;
  --color-heading: #21243d;
  --color-body: #52556e;
  --color-body-70: rgba(82, 85, 110, 0.7);
  --color-body-50: rgba(82, 85, 110, 0.5);
  --color-white: #ffffff;
  --color-bg-subtle: #f7f9fb;
  --color-bg-footer: #f2f4f6;
  --color-border: #eceef0;
  --color-border-input: #e0e3e5;
  --color-badge-bg: rgba(219, 229, 224, 0.5);

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container-max-width: 1280px;
  --container-padding-x: 40px;

  /* Elevation */
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.05);
  --shadow-input: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 10px rgba(33, 36, 61, 0.05);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--color-body);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input {
  font-family: inherit;
}

a {
  color: inherit;
}

/* Shared container used by every section */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* Skip link for keyboard/screen-reader users. Hidden via the same
   clip-rect technique as .visually-hidden (not a negative top offset) so it
   never paints above the document during overscroll/rubber-band bounce. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 1px;
  height: 1px;
  padding: 12px 20px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: var(--color-brand);
  color: var(--color-white);
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Visible focus ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

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

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

@media print {
  .site-header,
  .site-footer,
  .hero__cta,
  .email-signup__form {
    display: none;
  }
}