/* Redstone Logic shared stylesheet.
 *
 * Single source of truth for the design foundation: tokens, base typography,
 * layout utilities, and the button system. Linked LAST in every page's <head>
 * so it is authoritative. Page <style> blocks hold ONLY page-specific
 * components (heroes, cards, tables, forms); they no longer redefine anything
 * here, so the shared look can't drift across pages.
 */

:root {
  /* Brand */
  --rl-emerson: #B63C35;
  --rl-white: #FFFFFF;
  --rl-light-black: #2D2D2D;
  --rl-dark-sea-blue: #02298C;
  --rl-royal-aqua: #00C4D9;
  --rl-refresh-black: #121212;
  --rl-mid: #1E1E1E;

  /* Semantic aliases */
  --rl-primary: var(--rl-emerson);
  --rl-background-light: var(--rl-white);
  --rl-background-dark: var(--rl-refresh-black);
  --rl-text-light: var(--rl-light-black);
  --rl-text-dark: var(--rl-white);

  /* Type families */
  --rl-font-display: 'Share Tech', 'Segoe UI', system-ui, sans-serif;
  --rl-font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Type scale */
  --rl-font-size-xs: 11px;
  --rl-font-size-sm: 14px;
  --rl-font-size-base: 16px;
  --rl-font-size-md: 20px;
  --rl-font-size-lg: 24px;
  --rl-font-size-xl: 32px;
  --rl-font-size-2xl: 48px;
  --rl-font-size-3xl: 64px;

  /* Weights */
  --rl-font-weight-light: 300;
  --rl-font-weight-regular: 400;
  --rl-font-weight-medium: 500;
  --rl-font-weight-semibold: 600;

  /* Spacing */
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-5: 24px;
  --rl-space-6: 32px;
  --rl-space-7: 48px;
  --rl-space-8: 64px;
  --rl-space-9: 96px;
  --rl-space-10: 128px;

  /* Radius */
  --rl-radius-sm: 2px;
  --rl-radius-md: 4px;
  --rl-radius-lg: 8px;
  --rl-radius-full: 999px;

  /* Shadows */
  --rl-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --rl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

  /* Motion */
  --rl-transition-fast: 150ms ease;
  --rl-transition-normal: 300ms ease;
}

/* ============================================================
   RESET & BASE TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--rl-font-body);
  font-size: var(--rl-font-size-base);
  font-weight: var(--rl-font-weight-regular);
  color: var(--rl-text-light);
  line-height: 1.6;
  background-color: var(--rl-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rl-font-display);
  font-weight: var(--rl-font-weight-regular);
  line-height: 1.25;
}

a { text-decoration: none; color: inherit; }

img, svg { display: block; max-width: 100%; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--rl-space-5);
}

.section { padding: var(--rl-space-9) 0; }
.section--dark { background-color: var(--rl-refresh-black); color: var(--rl-text-dark); }
.section--gray { background-color: var(--rl-mid); color: var(--rl-text-dark); }
.section--mid { background-color: var(--rl-light-black); color: var(--rl-text-dark); }
.section--light { background-color: var(--rl-white); color: var(--rl-text-light); }

.section-label {
  font-family: var(--rl-font-body);
  font-size: var(--rl-font-size-xs);
  font-weight: var(--rl-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-royal-aqua);
  margin-bottom: var(--rl-space-3);
}
.section-label--red { color: var(--rl-emerson); }

.section-title {
  font-size: clamp(28px, 4vw, var(--rl-font-size-2xl));
  margin-bottom: var(--rl-space-5);
}

.section-subtitle {
  font-size: var(--rl-font-size-md);
  font-weight: var(--rl-font-weight-light);
  line-height: 1.6;
  max-width: 640px;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================================
   BUTTONS — the shared CTA system (authoritative site-wide)
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--rl-font-body);
  font-weight: var(--rl-font-weight-semibold);
  font-size: var(--rl-font-size-base);
  padding: var(--rl-space-3) var(--rl-space-7);
  border-radius: var(--rl-radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rl-transition-fast), color var(--rl-transition-fast), border-color var(--rl-transition-fast), box-shadow var(--rl-transition-fast);
  white-space: nowrap;
}

/* Primary: solid Emerson red. The nav "Get Started" CTA. */
.btn-primary { background-color: var(--rl-emerson); color: var(--rl-white); border-color: var(--rl-emerson); }
.btn-primary:hover { background-color: #9c332d; border-color: #9c332d; }

/* Outline: transparent with a white hairline border (use on dark sections). */
.btn-outline { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.08); }

/* Outline (white): alias of .btn-outline for legacy markup. */
.btn-outline-white { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-outline-white:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.08); }

/* Aqua: Royal Aqua fill for the free / install action. */
.btn-aqua { background-color: var(--rl-royal-aqua); color: var(--rl-refresh-black); border-color: var(--rl-royal-aqua); }
.btn-aqua:hover { background-color: #00a8b8; border-color: #00a8b8; }

/* White: white fill, red text (use on red / dark CTA bands). */
.btn-white { background-color: var(--rl-white); color: var(--rl-emerson); border-color: var(--rl-white); }
.btn-white:hover { background-color: rgba(255,255,255,0.9); }

/* Ghost: faint outline, lighter than .btn-outline. */
.btn-ghost { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.06); color: var(--rl-white); }
