/* =========================================================
   Remote Control Warehouse — Foundations
   Light, fast, no-frills. System fonts for instant load.
   ========================================================= */

:root {
  /* ---------- Color: Neutrals ---------- */
  --rcw-white:        #ffffff;
  --rcw-paper:        #fafbfc;   /* page bg */
  --rcw-surface:      #ffffff;   /* cards */
  --rcw-surface-2:    #f4f6f8;   /* subtle fills, table stripes */
  --rcw-border:       #e3e7eb;   /* hairlines */
  --rcw-border-strong:#cfd5dc;
  --rcw-ink-1:        #0f1722;   /* headings */
  --rcw-ink-2:        #2b3441;   /* body */
  --rcw-ink-3:        #5b6776;   /* secondary */
  --rcw-ink-4:        #8a96a4;   /* tertiary / placeholder */

  /* ---------- Color: Brand ---------- */
  /* Confident navy-blue for trust + reliability */
  --rcw-blue-50:      #eaf2fb;
  --rcw-blue-100:     #cfe0f4;
  --rcw-blue-200:     #9bbfe8;
  --rcw-blue-400:     #3679ce;
  --rcw-blue-500:     #1f5fb8;   /* primary */
  --rcw-blue-600:     #174c98;   /* hover */
  --rcw-blue-700:     #103a76;   /* press */
  --rcw-blue-900:     #0a2547;   /* deep, for headers/accents */

  /* Accent red — for price, CTAs, sale, phone */
  --rcw-red-50:       #fdecec;
  --rcw-red-100:      #f9cfcf;
  --rcw-red-500:      #d92626;   /* accent */
  --rcw-red-600:      #b81f1f;   /* hover */
  --rcw-red-700:      #951818;

  /* ---------- Color: Semantic ---------- */
  --rcw-success:      #1f8a4c;
  --rcw-success-bg:   #e6f4ec;
  --rcw-warning:      #b86f00;
  --rcw-warning-bg:   #fdf2dd;
  --rcw-danger:       var(--rcw-red-600);
  --rcw-danger-bg:    var(--rcw-red-50);
  --rcw-info:         var(--rcw-blue-500);
  --rcw-info-bg:      var(--rcw-blue-50);

  /* ---------- Role tokens (use these in components) ---------- */
  --rcw-bg:           var(--rcw-paper);
  --rcw-bg-elevated:  var(--rcw-surface);
  --rcw-fg:           var(--rcw-ink-2);
  --rcw-fg-strong:    var(--rcw-ink-1);
  --rcw-fg-muted:     var(--rcw-ink-3);
  --rcw-fg-subtle:    var(--rcw-ink-4);
  --rcw-line:         var(--rcw-border);
  --rcw-line-strong:  var(--rcw-border-strong);
  --rcw-primary:      var(--rcw-blue-500);
  --rcw-primary-hover:var(--rcw-blue-600);
  --rcw-primary-press:var(--rcw-blue-700);
  --rcw-on-primary:   #ffffff;
  --rcw-accent:       var(--rcw-red-500);
  --rcw-accent-hover: var(--rcw-red-600);
  --rcw-link:         var(--rcw-blue-500);
  --rcw-link-hover:   var(--rcw-blue-700);
  --rcw-price:        var(--rcw-red-600);

  /* ---------- Typography ---------- */
  /* System stack — zero network cost. The brand voice is clarity, not personality. */
  --rcw-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --rcw-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — modest, ecommerce-tuned */
  --rcw-fs-12: 0.75rem;   /* 12 — micro labels */
  --rcw-fs-13: 0.8125rem; /* 13 — meta */
  --rcw-fs-14: 0.875rem;  /* 14 — secondary body */
  --rcw-fs-15: 0.9375rem; /* 15 — body default */
  --rcw-fs-16: 1rem;      /* 16 — body emphasis */
  --rcw-fs-18: 1.125rem;  /* 18 — h5/lead */
  --rcw-fs-20: 1.25rem;   /* 20 — h4 */
  --rcw-fs-24: 1.5rem;    /* 24 — h3 */
  --rcw-fs-30: 1.875rem;  /* 30 — h2 */
  --rcw-fs-38: 2.375rem;  /* 38 — h1 */
  --rcw-fs-48: 3rem;      /* 48 — hero */

  --rcw-fw-regular: 400;
  --rcw-fw-medium:  500;
  --rcw-fw-semibold:600;
  --rcw-fw-bold:    700;

  --rcw-lh-tight:   1.15;
  --rcw-lh-snug:    1.3;
  --rcw-lh-normal:  1.5;
  --rcw-lh-relaxed: 1.65;

  --rcw-tracking-tight: -0.01em;
  --rcw-tracking-normal:0;
  --rcw-tracking-wide:  0.04em;
  --rcw-tracking-caps:  0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --rcw-space-1:  4px;
  --rcw-space-2:  8px;
  --rcw-space-3:  12px;
  --rcw-space-4:  16px;
  --rcw-space-5:  20px;
  --rcw-space-6:  24px;
  --rcw-space-8:  32px;
  --rcw-space-10: 40px;
  --rcw-space-12: 48px;
  --rcw-space-16: 64px;
  --rcw-space-20: 80px;

  /* ---------- Radius ---------- */
  --rcw-radius-xs: 2px;
  --rcw-radius-sm: 4px;
  --rcw-radius-md: 6px;   /* default — buttons, inputs, cards */
  --rcw-radius-lg: 10px;
  --rcw-radius-pill: 999px;

  /* ---------- Shadow (used sparingly — keep page light) ---------- */
  --rcw-shadow-sm: 0 1px 2px rgba(15, 23, 34, 0.06);
  --rcw-shadow-md: 0 2px 6px rgba(15, 23, 34, 0.08), 0 1px 2px rgba(15, 23, 34, 0.04);
  --rcw-shadow-lg: 0 8px 24px rgba(15, 23, 34, 0.10);
  --rcw-shadow-focus: 0 0 0 3px rgba(31, 95, 184, 0.25);

  /* ---------- Layout ---------- */
  --rcw-container: 1180px;
  --rcw-container-narrow: 760px;
  --rcw-header-h: 96px;     /* topbar + main nav */
  --rcw-topbar-h: 36px;

  /* ---------- Motion ---------- */
  --rcw-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --rcw-dur-fast: 120ms;
  --rcw-dur-base: 180ms;
}

/* =========================================================
   Base / Reset-ish
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rcw-bg);
  color: var(--rcw-fg);
  font-family: var(--rcw-font-sans);
  font-size: var(--rcw-fs-15);
  line-height: var(--rcw-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Semantic typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--rcw-space-4);
  color: var(--rcw-fg-strong);
  font-weight: var(--rcw-fw-bold);
  line-height: var(--rcw-lh-tight);
  letter-spacing: var(--rcw-tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--rcw-fs-38); }
h2 { font-size: var(--rcw-fs-30); }
h3 { font-size: var(--rcw-fs-24); font-weight: var(--rcw-fw-semibold); }
h4 { font-size: var(--rcw-fs-20); font-weight: var(--rcw-fw-semibold); letter-spacing: var(--rcw-tracking-normal); }
h5 { font-size: var(--rcw-fs-18); font-weight: var(--rcw-fw-semibold); letter-spacing: var(--rcw-tracking-normal); }
h6 {
  font-size: var(--rcw-fs-12);
  font-weight: var(--rcw-fw-bold);
  letter-spacing: var(--rcw-tracking-caps);
  text-transform: uppercase;
  color: var(--rcw-fg-muted);
}

p {
  margin: 0 0 var(--rcw-space-4);
  text-wrap: pretty;
}

small, .rcw-meta {
  font-size: var(--rcw-fs-13);
  color: var(--rcw-fg-muted);
}

a {
  color: var(--rcw-link);
  text-decoration: none;
  transition: color var(--rcw-dur-fast) var(--rcw-ease);
}
a:hover { color: var(--rcw-link-hover); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible {
  outline: none;
  box-shadow: var(--rcw-shadow-focus);
  border-radius: var(--rcw-radius-xs);
}

code, kbd, samp, pre {
  font-family: var(--rcw-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--rcw-surface-2);
  border: 1px solid var(--rcw-line);
  border-radius: var(--rcw-radius-sm);
  padding: 1px 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rcw-line);
  margin: var(--rcw-space-8) 0;
}

::selection { background: var(--rcw-blue-100); color: var(--rcw-ink-1); }

/* =========================================================
   Responsive — mobile-friendly down to 360px
   ========================================================= */
img, svg, video { max-width: 100%; height: auto; }

/* Tablet: 2-up where things were 4-up, 3-up where they were 6-up */
@media (max-width: 960px) {
  .rcw-grid-2-1 { grid-template-columns: 1fr !important; gap: 32px !important; }  /* hero, product page */
  .rcw-grid-cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
  .rcw-grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .rcw-feature-split { grid-template-columns: 1fr !important; }
  .rcw-trust-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 720px) {
  :root {
    --rcw-fs-48: 2rem;       /* 32 — hero on mobile */
    --rcw-fs-38: 1.625rem;   /* 26 — h1 */
    --rcw-fs-30: 1.375rem;   /* 22 — h2 */
    --rcw-fs-24: 1.1875rem;  /* 19 — h3 */
  }
  .rcw-container, .rcw-container-narrow { padding: 0 16px; }

  /* Force common multi-column grids down */
  .rcw-grid-2,
  .rcw-grid-3,
  .rcw-grid-4,
  .rcw-grid-2-1 { grid-template-columns: 1fr !important; }

  .rcw-grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .rcw-grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .rcw-grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .rcw-feature-split { grid-template-columns: 1fr !important; }
  .rcw-trust-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  /* Section padding gets tighter */
  .rcw-section-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .rcw-hero-pad { padding: 36px 16px 32px !important; }
  .rcw-hero-floats { display: none !important; }  /* hide absolutely-positioned hero cards */
  .rcw-hero-illus { display: none !important; }

  /* Stack flex rows that were horizontal */
  .rcw-stack-mobile { flex-direction: column !important; align-items: stretch !important; }
  .rcw-stack-mobile > * { width: 100%; }

  /* Hide on small screens */
  .rcw-hide-mobile { display: none !important; }

  /* Footer */
  .rcw-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .rcw-footer-brand { grid-column: 1 / -1; }

  /* Product page */
  .rcw-product-tabs { gap: 14px !important; overflow-x: auto; }
  .rcw-product-aside { margin-top: 24px; }

  /* FindMyRemote stepper labels shrink */
  .rcw-stepper li { padding: 8px 10px !important; font-size: 12px !important; }

  /* Pagination still horizontal but allow wrap */
  .rcw-pagination { flex-wrap: wrap !important; }
}

@media (max-width: 480px) {
  .rcw-grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .rcw-grid-cols-4 { grid-template-columns: 1fr 1fr !important; }
  .rcw-trust-strip { grid-template-columns: 1fr !important; }
  .rcw-footer-grid { grid-template-columns: 1fr !important; }
  .rcw-footer-brand { grid-column: auto; }
}

/* =========================================================
   Utility helpers (used by UI kit)
   ========================================================= */
.rcw-container { max-width: var(--rcw-container); margin: 0 auto; padding: 0 var(--rcw-space-6); }
.rcw-container-narrow { max-width: var(--rcw-container-narrow); margin: 0 auto; padding: 0 var(--rcw-space-6); }
.rcw-eyebrow {
  font-size: var(--rcw-fs-12);
  font-weight: var(--rcw-fw-bold);
  letter-spacing: var(--rcw-tracking-caps);
  text-transform: uppercase;
  color: var(--rcw-fg-muted);
}
.rcw-price { color: var(--rcw-price); font-weight: var(--rcw-fw-bold); }