/* ═══════════════════════════════════════════════════════════════
   TechStudyHub Core — Pharmacy Hub — style.css
   Global foundation: reset, typography, CSS variables, colors,
   containers, responsive foundations.
   Matches gateway v5 design system exactly.
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONTS ─── */
:root {
  --font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── THEME VARIABLES ─── */
:root {
  --cyan: #22d3ee;
  --cyan-bright: #00f3ff;
  --blue: #3b82f6;
  --indigo: #6366f1;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --violet: #8b5cf6;

  --gradient-brand: linear-gradient(135deg, var(--cyan-bright), var(--blue));
  --gradient-pharmacy: linear-gradient(135deg, var(--cyan), var(--indigo));

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

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --fs-5xl: 3.5rem;

  --container-max: 1200px;
  --container-narrow: 768px;
  --nav-height: 56px;
}

/* ── DARK THEME (default) ── */
[data-theme="dark"] {
  --bg: #020617;
  --bg-alt: #0f172a;
  --bg-card: rgba(15, 23, 42, 0.5);
  --bg-card-solid: #0f172a;
  --bg-overlay: rgba(2, 6, 23, 0.85);
  --text: #f1f5f9;
  --text-heading: #ffffff;
  --text-body: #cbd5e1;
  --text-muted: #64748b;
  --text-faint: #475569;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(34, 211, 238, 0.3);
  --border-active: rgba(34, 211, 238, 0.5);
  --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 30px -8px rgba(34, 211, 238, 0.15);
  --grid-line: rgba(34, 211, 238, 0.02);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-card-solid: #ffffff;
  --bg-overlay: rgba(248, 250, 252, 0.9);
  --text: #1e293b;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --border: rgba(15, 23, 42, 0.08);
  --border-hover: rgba(59, 130, 246, 0.3);
  --border-active: rgba(59, 130, 246, 0.5);
  --shadow-card: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 4px 20px -4px rgba(59, 130, 246, 0.12);
  --grid-line: rgba(59, 130, 246, 0.025);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: 1.2;
  font-weight: 700;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ─── LAYOUT ─── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.container-md { max-width: 900px; margin: 0 auto; padding: 0 var(--space-lg); }
.container-sm { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-lg); }
.section { padding: var(--space-4xl) 0; position: relative; }
.section-sm { padding: var(--space-3xl) 0; }

/* ─── BACKGROUND ─── */
.bg-grid-fixed {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.2); border-radius: 3px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.2); }