:root {
  --primary_color: #ffcc00;
  --on_primary_color: #202020;
  --secondary_color: #d8232f;
  --secondary_text_color: #ff5f66;

  --surface_color: #202020;
  --surface_container_color: #333333;
  --surface_container_low_color: #262626;
  --surface_container_lowest_color: #2a2a2a;
  --surface_inverse_color: #141414;

  --border_color: #363636;
  --border_subtle_color: #2c2c2c;
  --border_strong_color: #4a4a4a;

  --text_primary_color: #f2f2f2;
  --text_secondary_color: #a6a6a6;
  --text_tertiary_color: #757575;

  --success_color: #4ade80;
  --success_surface_color: #16301f;

  --primary_surface_color: #2e2612;
  --secondary_surface_color: #301618;
  --primary_border_color: rgba(255, 204, 0, .38);
  --primary_wash_color: rgba(255, 204, 0, .07);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max: 1180px;

  --pad: clamp(14px, calc(10.59px + 1.14vw), 24px);
  --nav_h: clamp(58px, calc(53.23px + 1.59vw), 72px);
  --r: 16px;
  --r_lg: 24px;
  --r_xl: 32px;

  --shadow: 0 10px 30px rgba(0, 0, 0, .40);
  --shadow_lg: 0 26px 60px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.22, .61, .36, 1);

  --phone_base: clamp(3.4px, min(calc(1.15px + 0.75vw), 1.5vh), 10px);
}

@media (max-width: 767px) {
  :root {
    --phone_base: min(2.26vw, 9.68px, 1.55vh);
  }
}