/* Urbanstart V5 design tokens. Loaded before every other V5 stylesheet. */

@font-face {
  font-family: "Orbitron";
  src: url("../fonts/Orbitron-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-400-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-500-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../fonts/Rajdhani-600-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.urbanstart-v5 {
  --us-color-ink: #0a0a0a;
  --us-color-ink-soft: #161616;
  --us-color-ink-muted: #24242a;
  --us-color-paper: #f2f5f7;
  --us-color-surface: #ffffff;
  --us-color-text: #151519;
  --us-color-muted: #62626c;
  --us-color-muted-dark: #b8b8c0;
  --us-color-line: rgba(11, 11, 14, 0.14);
  --us-color-line-dark: rgba(255, 255, 255, 0.16);
  --us-color-signal: #fdf500;
  --us-color-signal-hover: #e9e200;
  --us-color-cyan: #29d5e2;
  --us-color-cyan-hover: #6ce4ec;
  --us-color-purple: #973ca8;
  --us-color-purple-hover: #7e2d90;
  --us-color-purple-neon: #bc54d0;
  --us-color-success: #a6e22e;
  --us-color-danger: #b42318;

  --us-font-display: "Orbitron", "Arial Black", "Arial", sans-serif;
  --us-font-body: "Rajdhani", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --us-text-xs: 0.75rem;
  --us-text-sm: 0.875rem;
  --us-text-md: 1rem;
  --us-text-body: 1.125rem;
  --us-text-lead: clamp(1.25rem, 1.75vw, 1.375rem);
  --us-text-h3: clamp(1.375rem, 2.5vw, 1.875rem);
  --us-text-h2: clamp(2.125rem, 4vw, 3.125rem);
  --us-text-h1: clamp(2.625rem, 5.2vw, 4.125rem);

  --us-space-1: 0.25rem;
  --us-space-2: 0.5rem;
  --us-space-3: 0.75rem;
  --us-space-4: 1rem;
  --us-space-5: 1.125rem;
  --us-space-6: 1.5rem;
  --us-space-7: 1.75rem;
  --us-space-8: 2rem;
  --us-space-9: 2.125rem;
  --us-space-10: 2.5rem;
  --us-space-12: 3rem;
  --us-space-14: 3.5rem;
  --us-space-16: 4rem;
  --us-section-space: clamp(4.5rem, 8vw, 6.75rem);

  --us-radius-sm: 0.625rem;
  --us-radius-md: 0.875rem;
  --us-radius-lg: 1.125rem;
  --us-radius-button: 0.75rem;
  --us-radius-pill: 999px;

  --us-shadow-sm: 0 1rem 2.5rem rgba(11, 11, 14, 0.1);
  --us-shadow-lg: 0 1.75rem 4.5rem rgba(11, 11, 14, 0.22);
  --us-shadow-cyan: 0 0.625rem 1.5rem rgba(41, 213, 226, 0.18);
  --us-shadow-purple: 0 0.625rem 1.5rem rgba(151, 60, 168, 0.25);
  --us-shadow-signal: 0 1.125rem 2.75rem rgba(253, 245, 0, 0.14);

  --us-container: 73.75rem;
  --us-gutter: 1.25rem;
  --us-header-height: 4.5rem;
  --us-admin-bar-offset: 0px;

  --us-motion-fast: 180ms;
  --us-motion-standard: 220ms;
  --us-motion-slow: 360ms;
  --us-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 51.25rem) {
  .urbanstart-v5 {
    --us-header-height: 4rem;
  }
}

@media (max-width: 38.75rem) {
  .urbanstart-v5 {
    --us-text-body: 1.0625rem;
    --us-text-h1: clamp(2.375rem, 11.5vw, 2.625rem);
    --us-text-h2: clamp(1.9375rem, 9vw, 2.25rem);
    --us-section-space: 4.25rem;
  }
}