/* Reneli brand tokens — source: "Reneli Technology Brand Style Guide.png"
 * Purple #7B5CFF (innovation) · Blue #3FA8FF (technology) · Cyan #22D3EE (connection)
 * Navy #0B1736 (trust & stability) · Light gray #F3F5FA (clarity & minimalism)
 * Product pages (Loomi, TrakX) override these with their own brand palettes in styles.css. */
:root {
  --brand-purple: #7B5CFF;
  --brand-blue: #3FA8FF;
  --brand-cyan: #22D3EE;
  --brand-navy: #0B1736;
  --brand-light: #F3F5FA;
  --brand-gradient: linear-gradient(120deg, var(--brand-purple) 0%, var(--brand-blue) 55%, var(--brand-cyan) 100%);
  /* Text-safe gradient: the light cyan end fails contrast on light paper, so text uses purple → deeper blue. */
  --text-gradient: linear-gradient(100deg, #6A47F5 0%, #2F6FE8 100%);

  --color-paper: var(--brand-light);
  --color-surface: #FFFFFF;
  --color-ink: var(--brand-navy);
  --color-muted: #4A5578;
  --color-rule: #DDE2EE;
  --color-accent: #5B3FE6;
  --color-focus: #5B3FE6;
  --color-button: var(--brand-navy);
  --color-on-button: #FFFFFF;
  --color-panel: var(--brand-navy);
  --color-on-panel: #FFFFFF;
  --color-panel-muted: #B7C1DD;
  --shadow-tint: 222 60% 18%;

  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6.5rem;
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);
  --text-title: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);

  --radius-sm: .6rem; --radius-md: 1rem; --radius-lg: 1.75rem; --radius-pill: 999px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-micro: 140ms; --dur-short: 240ms; --dur-reveal: 700ms;
  --z-skip: 20; --z-header: 10;
}