/* ============================================================
   5G Store - Base CSS
   Custom properties, resets, typography, utility classes
   ============================================================ */

/* ---- DESIGN TOKENS ---------------------------------------- */
:root {
  /* Palette */
  --fgs-navy:        #0a1628;
  --fgs-navy-mid:    #132240;
  --fgs-navy-light:  #1e3358;
  --fgs-blue:        #0d47a1;
  --fgs-blue-hover:  #1565c0;
  --fgs-signal:      #00b4d8;
  --fgs-signal-dim:  #00899e;
  --fgs-signal-glow: rgba(0, 180, 216, 0.15);
  --fgs-white:       #f8faff;
  --fgs-off-white:   #eef2f7;
  --fgs-body:        #1a2535;
  --fgs-mid:         #4a5568;
  --fgs-muted:       #6b7a94;
  --fgs-border:      #dde3ee;
  --fgs-border-dark: #c5ceda;
  --fgs-success:     #22a06b;
  --fgs-warning:     #e8a000;
  --fgs-danger:      #c0392b;

  /* Typography */
  --fgs-font-head:   'DM Sans', system-ui, sans-serif;
  --fgs-font-body:   'Source Sans 3', system-ui, sans-serif;
  --fgs-font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes - fluid scale */
  --fgs-text-xs:     0.75rem;
  --fgs-text-sm:     0.875rem;
  --fgs-text-base:   1rem;
  --fgs-text-md:     1.125rem;
  --fgs-text-lg:     1.25rem;
  --fgs-text-xl:     1.5rem;
  --fgs-text-2xl:    1.875rem;
  --fgs-text-3xl:    2.25rem;
  --fgs-text-4xl:    3rem;
  --fgs-text-5xl:    3.75rem;

  /* Spacing */
  --fgs-space-1:   0.25rem;
  --fgs-space-2:   0.5rem;
  --fgs-space-3:   0.75rem;
  --fgs-space-4:   1rem;
  --fgs-space-5:   1.25rem;
  --fgs-space-6:   1.5rem;
  --fgs-space-8:   2rem;
  --fgs-space-10:  2.5rem;
  --fgs-space-12:  3rem;
  --fgs-space-16:  4rem;
  --fgs-space-20:  5rem;
  --fgs-space-24:  6rem;

  /* Layout */
  --fgs-max-width:      1200px;
  --fgs-content-width:  820px;
  --fgs-gutter:         clamp(1rem, 4vw, 2rem);
  --fgs-radius-sm:      4px;
  --fgs-radius:         8px;
  --fgs-radius-md:      12px;
  --fgs-radius-lg:      16px;
  --fgs-radius-full:    9999px;

  /* Shadows */
  --fgs-shadow-sm:   0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.05);
  --fgs-shadow:      0 4px 12px rgba(10, 22, 40, 0.10), 0 2px 6px rgba(10, 22, 40, 0.06);
  --fgs-shadow-md:   0 8px 24px rgba(10, 22, 40, 0.12), 0 4px 10px rgba(10, 22, 40, 0.08);
  --fgs-shadow-lg:   0 20px 48px rgba(10, 22, 40, 0.16), 0 8px 20px rgba(10, 22, 40, 0.10);
  --fgs-shadow-card: 0 2px 8px rgba(10, 22, 40, 0.07), 0 1px 3px rgba(10, 22, 40, 0.05);

  /* Transitions */
  --fgs-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fgs-ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --fgs-transition:  200ms var(--fgs-ease);
  --fgs-transition-slow: 350ms var(--fgs-ease);

  /* Z-index scale */
  --fgs-z-dropdown:  100;
  --fgs-z-sticky:    200;
  --fgs-z-modal:     300;
  --fgs-z-toast:     400;
}


/* ---- RESET ------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--fgs-font-body);
  font-size: var(--fgs-text-base);
  line-height: 1.65;
  color: var(--fgs-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--fgs-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--fgs-transition);
}
a:hover { color: var(--fgs-blue-hover); }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  padding-left: 1.4em;
  margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }


/* ---- TYPOGRAPHY ------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fgs-font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fgs-navy);
  margin: 0 0 0.75em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(var(--fgs-text-2xl), 4vw, var(--fgs-text-4xl));
  font-weight: 800;
}
h2 {
  font-size: clamp(var(--fgs-text-xl), 3vw, var(--fgs-text-3xl));
  font-weight: 700;
}
h3 {
  font-size: clamp(var(--fgs-text-lg), 2.5vw, var(--fgs-text-2xl));
}
h4 {
  font-size: var(--fgs-text-xl);
}
h5 {
  font-size: var(--fgs-text-lg);
}
h6 {
  font-size: var(--fgs-text-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fgs-mid);
}

/* Lead paragraph */
.fgs-lead {
  font-size: var(--fgs-text-lg);
  color: var(--fgs-mid);
  line-height: 1.7;
}

/* Section eyebrow label */
.fgs-eyebrow {
  display: inline-block;
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fgs-signal);
  margin-bottom: var(--fgs-space-3);
}

code,
kbd,
pre {
  font-family: var(--fgs-font-mono);
  font-size: 0.9em;
}

code {
  background: var(--fgs-off-white);
  padding: 0.15em 0.4em;
  border-radius: var(--fgs-radius-sm);
  color: var(--fgs-navy);
}

pre {
  background: var(--fgs-navy);
  color: var(--fgs-white);
  padding: var(--fgs-space-6);
  border-radius: var(--fgs-radius-md);
  overflow-x: auto;
  line-height: 1.6;
}

blockquote {
  border-left: 3px solid var(--fgs-signal);
  padding: var(--fgs-space-4) var(--fgs-space-6);
  margin: var(--fgs-space-6) 0;
  background: var(--fgs-signal-glow);
  border-radius: 0 var(--fgs-radius) var(--fgs-radius) 0;
  font-style: italic;
  color: var(--fgs-mid);
}


/* ---- UTILITY CLASSES -------------------------------------- */

.fgs-container {
  width: 100%;
  max-width: var(--fgs-max-width);
  margin-inline: auto;
  padding-inline: var(--fgs-gutter);
}

.fgs-container--narrow {
  max-width: var(--fgs-content-width);
}

.fgs-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;
}

.fgs-text-navy   { color: var(--fgs-navy); }
.fgs-text-signal { color: var(--fgs-signal); }
.fgs-text-muted  { color: var(--fgs-muted); }
.fgs-text-center { text-align: center; }

.fgs-flex        { display: flex; }
.fgs-flex-center { display: flex; align-items: center; justify-content: center; }
.fgs-gap-4       { gap: var(--fgs-space-4); }
.fgs-gap-6       { gap: var(--fgs-space-6); }
.fgs-gap-8       { gap: var(--fgs-space-8); }

/* Divider */
.fgs-divider {
  border: none;
  border-top: 1px solid var(--fgs-border);
  margin: var(--fgs-space-8) 0;
}
.fgs-divider--signal {
  border-top-color: var(--fgs-signal);
  border-top-width: 2px;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--fgs-signal);
  outline-offset: 3px;
  border-radius: var(--fgs-radius-sm);
}

/* Skip to main content */
.fgs-skip-link {
  position: absolute;
  top: -100%;
  left: var(--fgs-gutter);
  background: var(--fgs-navy);
  color: var(--fgs-white);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--fgs-radius) var(--fgs-radius);
  font-family: var(--fgs-font-head);
  font-weight: 600;
  text-decoration: none;
  z-index: var(--fgs-z-modal);
  transition: top var(--fgs-transition);
}
.fgs-skip-link:focus {
  top: 0;
}


/* ---- RESPONSIVE HELPERS ----------------------------------- */
@media (max-width: 768px) {
  :root {
    --fgs-gutter: 1rem;
  }
}