/* ==========================================================================
   PRIVA SOLUTIONS - THEME VARIABLES & SYSTEM DESIGN
   File: theme.css
   Clean light canvas + deep navy structure + blue primary actions +
   lime signature accent + restrained magenta premium accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM
     ------------------------------------------------------------------------ */

  /* Canvas & Containers */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F9FC;
  --bg-tertiary: #FFF1EB;
  --bg-dark-hero: #1D293D;
  --bg-card-white: #FFFFFF;

  /* Core Navy / Slate */
  --color-navy-main: #1D293D;
  --color-navy-dark: #14213D;
  --color-navy-deep: #1D293D;
  --color-navy-light: #334155;
  --color-navy-tint: #F7F9FC;
  --color-navy-border: #E2E8F0;

  /* Signature Deep Blue */
  --color-brand-blue: #1D293D;
  --color-brand-blue-mid: #1A3073;
  --color-brand-blue-light: #162E66;
  --color-brand-blue-border: #294B91;
  --color-brand-blue-gradient: linear-gradient(180deg, #1D293D 0%, #1A3073 100%);
  --color-brand-blue-card: linear-gradient(135deg, #11254E 0%, #1D293D 100%);

  /* Primary Blue */
  --color-blue-on-white: #2463EB;
  --color-blue-on-white-hover: #1D56D2;
  --color-blue-light-tint: #EFF6FF;
  --color-blue-light-border: #BFDBFE;
  --color-electric-blue: #2463EB;
  --color-sky-blue: #2463EB;
  --color-blue-vibrant: #2463EB;
  --color-blue-hover: #1D56D2;
  --color-blue-tint: #EFF6FF;
  --color-blue-border: #BFDBFE;

  /* Signature Lime — used for positive states and selected highlights */
  --color-lime: #FC4800;
  --color-lime-hover: #E43F00;
  --color-lime-dark: #C93600;
  --color-lime-tint: #FFF1EB;
  --color-lime-border: #FFB39C;
  --color-lime-shadow: rgba(176, 240, 38, 0.30);

  /* Backwards-compatible Green aliases */
  --color-shopify-green: #FC4800;
  --color-shopify-green-hover: #E43F00;
  --color-shopify-green-dark: #C93600;
  --color-shopify-green-tint: #FFF1EB;
  --color-shopify-green-border: #FFB39C;
  --color-shopify-green-shadow: rgba(176, 240, 38, 0.30);

  --color-green-success: #FC4800;
  --color-green-dark: #C93600;
  --color-green-tint: #FFF1EB;
  --color-green-border: #FFB39C;

  /* Magenta — deliberately restrained premium/emphasis accent */
  --color-magenta: #2463EB;
  --color-magenta-hover: #1D56D2;
  --color-magenta-dark: #A30845;
  --color-magenta-tint: #EDF4FF;
  --color-magenta-border: #F4A8C3;
  --color-magenta-shadow: rgba(237, 14, 100, 0.24);

  /* Backwards-compatible Pink aliases */
  --color-pink-vibrant: #2463EB;
  --color-pink-hover: #1D56D2;
  --color-pink-tint: #EDF4FF;
  --color-pink-border: #F4A8C3;

  /* Legacy semantic aliases:
     Yellow/Cyan/Orange/Purple names remain available to avoid breaking
     components, but resolve into the new controlled palette. */
  --color-cyan-vibrant: #2463EB;
  --color-cyan-hover: #1D56D2;
  --color-cyan-dark: #1D4ED8;
  --color-cyan-tint: #EFF6FF;
  --color-cyan-border: #BFDBFE;
  --color-cyan-shadow: rgba(56, 121, 242, 0.24);

  --color-yellow-primary: #FC4800;
  --color-yellow-hover: #E43F00;
  --color-yellow-tint: #FFF1EB;
  --color-yellow-border: #FFB39C;
  --color-yellow-data: #FC4800;
  --color-yellow-dark: #C93600;

  --color-cta-blue: #2463EB;
  --color-cta-blue-hover: #1D56D2;
  --color-cta-blue-shadow: rgba(56, 121, 242, 0.30);
  --color-cta-cyan: #2463EB;
  --color-cta-cyan-hover: #1D56D2;
  --color-cta-cyan-shadow: rgba(56, 121, 242, 0.24);
  --color-cta-green: #FC4800;
  --color-cta-green-hover: #E43F00;
  --color-cta-green-shadow: rgba(176, 240, 38, 0.30);

  --color-orange-primary: #2463EB;
  --color-orange-hover: #1D56D2;
  --color-orange-tint: #EDF4FF;
  --color-orange-border: #F4A8C3;

  --color-purple-dark: #1D293D;
  --color-purple-deep: #14213D;
  --color-purple-primary: #1D293D;
  --color-purple-mid: #334155;
  --color-purple-light: #334155;
  --color-purple-tint: #F7F9FC;
  --color-purple-border: #E2E8F0;

  /* Neutrals */
  --color-text-main: #1D293D;
  --color-text-muted: #334155;
  --color-text-subtle: #64748B;
  --color-border-light: #E2E8F0;
  --color-border-subtle: #F1F5F9;

  /* Cursor Spotlight Coordinates */
  --mouse-x: 50%;
  --mouse-y: 50%;

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY & FLUID SCALING
     ------------------------------------------------------------------------ */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-hero: clamp(1.8rem, 3vw, 2.6rem);
  --font-h1: clamp(1.5rem, 2.4vw, 2.1rem);
  --font-h2: clamp(1.25rem, 1.8vw, 1.65rem);
  --font-h3: clamp(1.05rem, 1.3vw, 1.3rem);
  --font-h4: clamp(0.95rem, 1.1vw, 1.1rem);
  --font-body-lg: clamp(0.9rem, 1vw, 1.05rem);
  --font-body-md: clamp(0.825rem, 0.9vw, 0.95rem);
  --font-small: clamp(0.75rem, 0.8vw, 0.825rem);
  --font-stat-huge: clamp(2.2rem, 3.8vw, 3.4rem);

  /* ------------------------------------------------------------------------
     3. BORDER RADIUS
     ------------------------------------------------------------------------ */
  --radius-roku-hero: 24px;
  --radius-2xl: 24px;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px;

  /* ------------------------------------------------------------------------
     4. ELEVATION & SHADOWS
     ------------------------------------------------------------------------ */
  --shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-navy-heavy: 0 20px 50px rgba(15, 23, 42, 0.22);
  --shadow-purple-heavy: var(--shadow-navy-heavy);
  --shadow-blue-btn: 0 8px 25px rgba(56, 121, 242, 0.30);
  --shadow-blue-glow: 0 0 28px rgba(56, 121, 242, 0.22);
  --shadow-lime-btn: 0 8px 25px rgba(176, 240, 38, 0.30);
  --shadow-lime-glow: 0 0 28px rgba(176, 240, 38, 0.22);
  --shadow-magenta: 0 8px 25px rgba(237, 14, 100, 0.22);

  /* Legacy shadow aliases */
  --shadow-yellow-btn: var(--shadow-lime-btn);
  --shadow-yellow-glow: var(--shadow-lime-glow);

  /* ------------------------------------------------------------------------
     5. TRANSITIONS
     ------------------------------------------------------------------------ */
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s var(--ease-out-smooth);
  --transition-normal: 0.32s var(--ease-out-smooth);
  --transition-slow: 0.6s var(--ease-out-smooth);
}

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

html {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--color-text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--color-text-main);
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-main);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

p {
  color: var(--color-text-muted);
  font-size: var(--font-body-md);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-lime);
}

/* Text Highlights */
.text-yellow-highlight,
.text-green-highlight {
  color: var(--color-lime);
  display: inline-block;
  font-weight: 800;
}

.text-orange-highlight {
  color: var(--color-magenta);
  display: inline-block;
  font-weight: 800;
}

.text-cyan-highlight,
.text-blue-highlight,
.text-sky-highlight {
  color: var(--color-blue-on-white);
  display: inline-block;
  font-weight: 800;
}

.text-red-highlight {
  color: var(--color-magenta);
  display: inline-block;
  font-weight: 800;
  font-style: italic;
}

.text-navy-highlight {
  color: var(--color-brand-blue);
  display: inline-block;
  font-weight: 800;
}

.bg-navy-main,
.bg-purple-dark,
.bg-dark-navy,
.bg-navy-2,
.bg-navy,
.bg-blue,
.bg-brand-blue,
.bg-blue-gradient,
.bg-blue-dark,
.bg-blue-card,
.bg-yellow-card,
.bg-green-card {
  background-color: var(--color-navy-main);
  color: #FFFFFF !important;
}

/* Explicit high-contrast white text for all elements inside dark blue & navy containers */
.bg-navy-main,
.bg-navy-main h1, .bg-navy-main h2, .bg-navy-main h3, .bg-navy-main h4, .bg-navy-main h5, .bg-navy-main h6,
.bg-navy-main p, .bg-navy-main span:not(.badge-exempt), .bg-navy-main li, .bg-navy-main label, .bg-navy-main strong, .bg-navy-main small,
.bg-purple-dark,
.bg-purple-dark h1, .bg-purple-dark h2, .bg-purple-dark h3, .bg-purple-dark h4, .bg-purple-dark h5, .bg-purple-dark h6,
.bg-purple-dark p, .bg-purple-dark span, .bg-purple-dark li, .bg-purple-dark strong,
.bg-dark-navy,
.bg-dark-navy h1, .bg-dark-navy h2, .bg-dark-navy h3, .bg-dark-navy h4, .bg-dark-navy h5, .bg-dark-navy h6,
.bg-dark-navy p, .bg-dark-navy span, .bg-dark-navy li, .bg-dark-navy strong,
.bg-navy-2,
.bg-navy-2 h1, .bg-navy-2 h2, .bg-navy-2 h3, .bg-navy-2 h4, .bg-navy-2 h5, .bg-navy-2 h6,
.bg-navy-2 p, .bg-navy-2 span, .bg-navy-2 li, .bg-navy-2 strong,
.bg-blue,
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4, .bg-blue h5, .bg-blue h6,
.bg-blue p, .bg-blue span, .bg-blue li, .bg-blue strong,
.stats-section,
.stats-section > .container-custom > .section-header-center h1,
.stats-section > .container-custom > .section-header-center h2,
.stats-section > .container-custom > .section-header-center h3,
.stats-section > .container-custom > .section-header-center p,
.stats-section .section-header-center h2,
.stats-section .section-header-center p,
.cta-banner-card h1, .cta-banner-card h2, .cta-banner-card h3, .cta-banner-card h4,
.cta-banner-card p, .cta-banner-card span:not(.badge),
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.cta-section p,
.sticky-bottom-bar,
.sticky-bottom-bar span,
.sticky-bottom-bar strong,
.sticky-bottom-bar p,
.hero-guide-card h1, .hero-guide-card h2, .hero-guide-card h3, .hero-guide-card h4,
.hero-guide-card p,
footer,
.site-footer,
.main-footer {
  color: #FFFFFF !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer li, footer span:not(.badge-exempt),
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
.site-footer p, .site-footer li, .site-footer span:not(.badge-exempt),
.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, .main-footer h5, .main-footer h6,
.main-footer p, .main-footer li, .main-footer span:not(.badge-exempt) {
  color: #FFFFFF !important;
}

footer,
.site-footer,
.main-footer {
  background: var(--color-brand-blue) !important;
  background-color: var(--color-brand-blue) !important;
  color: #FFFFFF !important;
}