/* styles.css */
:root {
  /* BRAND — Lumelys Protect */
  --gold: #C9A24D;
  --gold-light: #E1C878;
  --gold-dim: rgba(201, 162, 77, 0.45);

  /* SURFACES */
  --bg-app: #0B0B0B;
  --bg-dark: #151515;
  --bg-card: #1a1a1a;
  --bg-border: #2a2a2a;

  /* TEXT */
  --text-main: #F5F5F5;
  --text-muted: #B7B7B7;
  --text-muted-light: #D4D4D4;
  --text-inverse: #0B0B0B;

  /* STATUS */
  --red: #e74c3c;
  --success: #34C759;

  /* TYPOGRAPHY */
  --font-heading: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-mono: "Courier New", monospace;

  /* SPACING */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

.app-theme {
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

img {
  display: block;
}

.text-gold {
  color: var(--gold);
}

.text-muted {
  color: var(--text-muted);
}


/* shared.css */
/* ================================================
   Lumelys Protect — Shared wireframe tokens & base
   Dark theme · Gold accents · CCTV surveillance UI
   ================================================ */

.lp, .lp-m {
  --bg-app: #0B0B0B;
  --bg-card: #1a1a1a;
  --bg-dark: #151515;
  --gold: #C9A24D;
  --gold-light: #E1C878;
  --white: #F5F5F5;
  --gray: #B7B7B7;
  --border: #2a2a2a;
  --radius: 12px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  background: var(--bg-app);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}

.lp   { font-size: 14px; }
.lp-m { font-size: 13px; line-height: 1.5; }

/* ---- Gold icon filter (reusable) ---- */
/* Target: #C9A24D — from black currentColor rendered in <img> */
.icon-gold {
  filter: brightness(0) saturate(100%) invert(69%) sepia(30%) saturate(600%) hue-rotate(5deg) brightness(90%) contrast(88%);
}

/* ---- Navigation ---- */

.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  background: rgba(11, 11, 11, 0.95);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.lp-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold);
}

.lp-nav__logo-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gold);
  opacity: 0.8;
}

.lp-nav__logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.lp-m__nav .lp-nav__logo-img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.lp-nav__links {
  display: flex;
  gap: var(--space-xl);
}

.lp-nav__links a {
  color: var(--gray);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Section titles ---- */

.lp-section {
  padding: var(--space-3xl) var(--space-2xl);
  max-width: 980px;
  margin: 0 auto;
}

.lp-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--space-md);
  position: relative;
}

.lp-section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: var(--space-md) auto 0;
  border-radius: 2px;
}

.lp-section__intro {
  text-align: center;
  color: var(--gray);
  max-width: 600px;
  margin: var(--space-lg) auto var(--space-2xl);
}

/* ---- Buttons ---- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  letter-spacing: 0.5px;
}

.lp-btn--primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #0B0B0B;
  border: none;
}

/* ---- Mobile nav ---- */

.lp-m__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: rgba(11,11,11,0.95);
  border-bottom: 1px solid var(--border);
}

.lp-m__nav .lp-nav__brand { font-size: 14px; }
.lp-m__nav .lp-nav__logo-box { width: 24px; height: 24px; border-radius: 6px; }

.lp-m__hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.lp-m__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

/* ---- Mobile sections ---- */

.lp-m__section {
  padding: var(--space-2xl) var(--space-lg);
}

.lp-m__section .lp-section__title { font-size: 22px; }
.lp-m__section .lp-section__intro { font-size: 13px; margin-bottom: var(--space-xl); }