/**
 * RALENTI design tokens — enqueue via Hello Elementor child theme
 * Mirror these values in Elementor → Site Settings → Global Colors & Typography
 */

:root {
  /* Colors */
  --ralenti-racing-red: #e52629;
  --ralenti-surface-deep: #000000;
  --ralenti-surface: #121414;
  --ralenti-surface-dim: #121414;
  --ralenti-surface-panel: #1e1e27;
  --ralenti-surface-container: #1e2020;
  --ralenti-on-surface: #e2e2e2;
  --ralenti-on-surface-variant: #e6bdb8;
  --ralenti-outline: #ad8884;
  --ralenti-technical-blue: #005992;
  --ralenti-primary-container: #e52629;

  /* Layout */
  --ralenti-container-max: 1280px;
  --ralenti-margin-mobile: 16px;
  --ralenti-margin-desktop: 64px;
  --ralenti-gutter: 24px;
  --ralenti-header-height: 80px;

  /* Typography families (loaded in child theme) */
  --ralenti-font-headline: "Hanken Grotesk", sans-serif;
  --ralenti-font-body: "Inter", sans-serif;
  --ralenti-font-mono: "JetBrains Mono", monospace;
}

/* Base page (Hello Elementor + Elementor full width) */
body.ralenti-site,
.elementor-page.ralenti-site {
  background-color: var(--ralenti-surface-deep);
  color: var(--ralenti-on-surface);
  font-family: var(--ralenti-font-body);
}

.ralenti-container {
  width: 100%;
  max-width: var(--ralenti-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ralenti-margin-mobile);
  padding-right: var(--ralenti-margin-mobile);
}

@media (min-width: 1025px) {
  .ralenti-container {
    padding-left: var(--ralenti-margin-desktop);
    padding-right: var(--ralenti-margin-desktop);
  }
}

/* Elementor global color aliases (add same slugs in Site Settings) */
.has-ralenti-racing-red-color { color: var(--ralenti-racing-red) !important; }
.has-ralenti-on-surface-color { color: var(--ralenti-on-surface) !important; }
.has-ralenti-on-surface-variant-color { color: var(--ralenti-on-surface-variant) !important; }

.has-ralenti-racing-red-background-color { background-color: var(--ralenti-racing-red) !important; }
.has-ralenti-surface-background-color { background-color: var(--ralenti-surface) !important; }
.has-ralenti-surface-panel-background-color { background-color: var(--ralenti-surface-panel) !important; }
.has-ralenti-surface-deep-background-color { background-color: var(--ralenti-surface-deep) !important; }

/* Type scale helpers */
.ralenti-headline-xl {
  font-family: var(--ralenti-font-headline);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.ralenti-label-caps {
  font-family: var(--ralenti-font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
}

.ralenti-body-lg {
  font-family: var(--ralenti-font-body);
  font-size: 18px;
  line-height: 28px;
}