/* ============================================================
   Gobvantage Technologies — Base
   Reset · Tokens · Utilities
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Surface Hierarchy (use tonal shifts — no 1px borders) */
  --background:                 #f7f9fb;
  --surface:                    #f7f9fb;
  --surface-container-low:      #f0f4f7;
  --surface-container-lowest:   #ffffff;
  --surface-container-highest:  #d9e4ea;
  --surface-variant:            #dce6ec;

  /* Primary Palette */
  --primary:                    #4b6171;
  --primary-dim:                #3f5564;
  --primary-container:          #cee6f8;
  --on-primary:                 #f2f8ff;
  --on-primary-container:       #0d2535;

  /* Text */
  --on-surface:                 #2a3439;
  --on-surface-variant:         #4a5c65;
  --on-background:              #2a3439;

  /* Outline (ghost border — 15% opacity only) */
  --outline:                    #6b7d85;
  --outline-variant:            #a9b4b9;

  /* Semantic */
  --error:                      #9f403d;
  --error-container:            #fe8983;
  --on-error:                   #ffffff;
  --success:                    #2e6b4f;
  --success-container:          #b7f0d4;
  --warning:                    #7a5c1e;
  --warning-container:          #fde8a0;

  /* Signature Gradient */
  --gradient-primary:           linear-gradient(135deg, #4b6171, #3f5564);

  /* Legacy aliases — keeps any product code using old token names working */
  --color-primary:              #4b6171;
  --color-primary-hover:        #3f5564;
  --color-background:           #ffffff;
  --color-surface:              #f0f4f7;
  --color-border:               rgba(169, 180, 185, 0.15);
  --color-text:                 #2a3439;
  --color-text-muted:           #4a5c65;

  /* Typography */
  --font-sans:                  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:                  'SF Mono', Monaco, 'Cascadia Code', monospace;

  --text-display-lg:            3.5rem;
  --text-headline-lg:           2.0rem;
  --text-headline-md:           1.5rem;
  --text-headline-sm:           1.25rem;
  --text-title-lg:              1.125rem;
  --text-title-md:              1rem;
  --text-body-md:               0.875rem;
  --text-body-sm:               0.8125rem;
  --text-label-md:              0.75rem;
  --text-label-sm:              0.6875rem;

  --tracking-tighter:           -0.02em;
  --tracking-label:              0.05em;
  --leading-body:                1.6;

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

  /* Radius (industrial — tight, no pills) */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.375rem;  /* legacy alias — capped at md */

  /* Shadows (ambient only) */
  --shadow-sm:   0 2px 8px  rgba(42, 52, 57, 0.04);
  --shadow-md:   0 4px 24px rgba(42, 52, 57, 0.06);
  --shadow-lg:   0 8px 48px rgba(42, 52, 57, 0.08);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-medium: 250ms ease;

  /* Layout */
  --container-max:  1200px;
  --container-pad:  var(--space-6);
  --nav-height:     4rem;

  /* Glassmorphism (nav/overlays only) */
  --glass-bg:   rgba(247, 249, 251, 0.70);
  --glass-blur: 24px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--on-surface);
  background: var(--background);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a:hover {
  color: var(--primary-dim);
  text-decoration: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

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

ul, ol {
  list-style: none;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ============================================================
   UTILITIES — all referenced in HTML/JS preserved exactly
   ============================================================ */

/* Display */
.hidden          { display: none !important; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap       { flex-wrap: wrap; }

/* Gap */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 1rem; }
.gap-4  { gap: 1.5rem; }

/* Margin top */
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 1rem; }
.mt-4  { margin-top: 1.5rem; }

/* Margin bottom */
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 1rem; }
.mb-4  { margin-bottom: 1.5rem; }

/* Text */
.text-center  { text-align: center; }
.text-muted   { color: var(--on-surface-variant); }
.text-primary { color: var(--primary); }

/* 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 */
@media (max-width: 768px) {
  .hide-mobile  { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}