/* Essential IPTV Smarters — Design System (style.css)
   Mobile-first, production-ready variables and base styles
*/
:root {
  --color-bg: #0A0F2C;
  --color-surface: #111827;
  --color-surface-hover: #1F2937;
  --color-border: #1F2937;

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-accent: #F59E0B;
  --color-success: #10B981;
  --color-canada: #FF0000;

  --color-text: #F9FAFB;
  --color-text-muted: #9CA3AF;
  --color-text-inverse: #0A0F2C;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-display: 'Sora', var(--font-sans);
}

/* Base reset and layout */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: var(--font-sans);
  background: linear-gradient(180deg,var(--color-bg) 0%, #071026 100%);
  color: var(--color-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}

img { max-width:100%; height:auto; display:block; }
a { color:var(--color-primary); text-decoration:none; }
button { font:inherit; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-md); }

.header { background:transparent; padding:var(--space-sm) 0; }
.site-logo { font-family:var(--font-display); font-weight:700; color:var(--color-text); }

/* Utility helpers */
.grid { display:grid; gap:var(--space-lg); }
.flex { display:flex; gap:var(--space-md); align-items:center; }
.card { background:var(--color-surface); border-radius:var(--radius-md); padding:var(--space-md); border:1px solid var(--color-border); }
.btn { background:var(--color-primary); color:white; padding:0.6rem 1rem; border-radius:6px; border:none; cursor:pointer; }
.btn:hover { background:var(--color-primary-hover); }

/* Accessibility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Responsive breakpoints (mobile-first) */
@media (min-width:640px) {
  .container { padding:0 var(--space-lg); }
}
@media (min-width:1024px) {
}

/* Quick-answer block styling */
.quick-answer { background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); padding:var(--space-md); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.04); }

/* Small helpers for headings */
h1,h2,h3 { color:var(--color-text); margin:0 0 var(--space-sm) 0; }
h1 { font-family:var(--font-display); font-size:2rem; }

/* Footer */
.footer { padding:var(--space-xl) 0; color:var(--color-text-muted); font-size:0.95rem; }
.grid-cols-2 { grid-template-columns:1fr 1fr; }
.grid-cols-3 { grid-template-columns:repeat(3,1fr); }