/* ==========================================================================
   Renault Design System — Colors & Type
   Source: daklab2ohdesign/DESIGN-renault.md (alpha)
   Substitute font: Inter Tight (Google Fonts) → replace with NouvelR if licensed.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand & Accent ---------- */
  --r-primary: #bd2136;          /* Primary brand accent */
  --r-primary-rgb: 189, 33, 54;  /* RGB triplet for alpha treatments */
  --r-primary-deep: #8f1929;     /* Pressed state of primary CTAs */
  --r-primary-on-dark: color-mix(in srgb, var(--r-primary) 72%, white);
  --r-on-primary: #ffffff;       /* Text and icons on primary */

  /* ---------- Ink (text) ---------- */
  --r-ink: #000000;              /* Primary text on light */
  --r-body: #222222;             /* Body paragraphs */
  --r-charcoal: #333333;         /* Captions, metadata */
  --r-mute: #666666;             /* Inactive nav, supporting text */
  --r-ash: #8a8a8a;              /* Placeholders */
  --r-stone: #c4c4c4;            /* Disabled */
  --r-on-dark: #ffffff;          /* Primary text on dark */
  --r-on-dark-mute: rgba(255,255,255,0.72);

  /* ---------- Surface ---------- */
  --r-canvas: #ffffff;           /* Default page bg */
  --r-surface-soft: #f7f7f7;     /* Subtle elevation step */
  --r-surface-card: #ffffff;
  --r-surface-dark: #000000;     /* Alternate canvas */
  --r-surface-deep: #111111;     /* Inset cards inside dark */
  --r-hairline: #f2f2f2;         /* Soft 1px divider on white */
  --r-hairline-strong: #000000;  /* Full-strength divider / button outline */
  --r-divider-dark: rgba(255,255,255,0.16);
  --r-badge-new: var(--r-primary);

  /* ---------- Semantic (muted, not vivid) ---------- */
  --r-error: #be6464;
  --r-warning: #f0ad4e;
  --r-success: #8dc572;
  --r-info: #337ab7;
  --r-link: #0000ee;

  /* ---------- Spacing (4px base) ---------- */
  --r-sp-xxs: 4px;
  --r-sp-xs: 8px;
  --r-sp-sm: 12px;
  --r-sp-md: 16px;
  --r-sp-lg: 20px;
  --r-sp-xl: 24px;
  --r-sp-xxl: 32px;
  --r-sp-xxxl: 40px;
  --r-sp-section: 80px;

  /* ---------- Radii ---------- */
  --r-radius-none: 0px;
  --r-radius-xs: 2px;            /* Buttons */
  --r-radius-sm: 3px;
  --r-radius-md: 4px;
  --r-radius-pill: 46px;         /* Sub-nav, badges */
  --r-radius-full: 9999px;       /* Color swatches */

  /* ---------- Shadow (used sparingly) ---------- */
  --r-shadow-subtle: 0 2px 4px rgba(0,0,0,0.10);

  /* ---------- Type family ---------- */
  --r-font: "Inter Tight", "NouvelR", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type tokens (size / weight / line-height / tracking) ---------- */
  --r-display-xl-size: 56px;
  --r-display-lg-size: 40px;
  --r-display-md-size: 32px;
  --r-heading-lg-size: 24px;
  --r-heading-md-size: 20px;
  --r-heading-sm-size: 18px;
  --r-subtitle-size: 19.2px;
  --r-body-lg-size: 18px;
  --r-body-md-size: 16px;
  --r-body-sm-size: 14px;
  --r-button-lg-size: 16px;
  --r-button-md-size: 14.4px;
  --r-button-sm-size: 13px;
  --r-caption-size: 12px;
  --r-overline-size: 10px;
}

/* ==========================================================================
   Semantic typography classes
   ========================================================================== */

html, body { font-family: var(--r-font); color: var(--r-ink); background: var(--r-canvas); }

.r-display-xl, h1.r-display-xl {
  font-family: var(--r-font); font-size: var(--r-display-xl-size); font-weight: 700;
  line-height: 0.95; letter-spacing: 0;
}
.r-display-lg {
  font-family: var(--r-font); font-size: var(--r-display-lg-size); font-weight: 700;
  line-height: 0.95; letter-spacing: 0;
}
.r-display-md {
  font-family: var(--r-font); font-size: var(--r-display-md-size); font-weight: 700;
  line-height: 0.95; letter-spacing: 0;
}
.r-heading-lg, h2.r-heading-lg {
  font-family: var(--r-font); font-size: var(--r-heading-lg-size); font-weight: 700;
  line-height: 0.95; letter-spacing: 0;
}
.r-heading-md, h3.r-heading-md {
  font-family: var(--r-font); font-size: var(--r-heading-md-size); font-weight: 700;
  line-height: 0.95; letter-spacing: 0;
}
.r-heading-sm, h4.r-heading-sm {
  font-family: var(--r-font); font-size: var(--r-heading-sm-size); font-weight: 700;
  line-height: 1.0; letter-spacing: 0;
}
.r-subtitle {
  font-family: var(--r-font); font-size: var(--r-subtitle-size); font-weight: 600;
  line-height: 1.3; letter-spacing: 0;
}
.r-body-lg {
  font-family: var(--r-font); font-size: var(--r-body-lg-size); font-weight: 400;
  line-height: 1.5; letter-spacing: 0;
}
.r-body-md, p {
  font-family: var(--r-font); font-size: var(--r-body-md-size); font-weight: 400;
  line-height: 1.4; letter-spacing: 0;
}
.r-body-sm {
  font-family: var(--r-font); font-size: var(--r-body-sm-size); font-weight: 400;
  line-height: 1.57; letter-spacing: 0;
}
.r-button-lg {
  font-family: var(--r-font); font-size: var(--r-button-lg-size); font-weight: 700;
  line-height: 1.0; letter-spacing: 0;
}
.r-button-md {
  font-family: var(--r-font); font-size: var(--r-button-md-size); font-weight: 700;
  line-height: 1.0; letter-spacing: 0.144px;
}
.r-button-sm {
  font-family: var(--r-font); font-size: var(--r-button-sm-size); font-weight: 600;
  line-height: 1.2; letter-spacing: 0.13px;
}
.r-caption {
  font-family: var(--r-font); font-size: var(--r-caption-size); font-weight: 400;
  line-height: 1.4; letter-spacing: 0;
}
.r-overline {
  font-family: var(--r-font); font-size: var(--r-overline-size); font-weight: 700;
  line-height: 1.45; letter-spacing: 0; text-transform: uppercase;
}