/* ============================================================
   SQEWISE DESIGN SYSTEM
   Every page loads this file. Never hardcode colours elsewhere.
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,700;0,800;1,400;1,600&family=Inter:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
:root {
  /* Brand colours */
  --sq-primary:        #2D0A5E;
  --sq-primary-hover:  #3D1278;
  --sq-primary-light:  #EDE9FE;
  --sq-purple-mid:     #6D28D9;
  --sq-accent:         #C41E3A;
  --sq-accent-hover:   #A01830;

  /* Surfaces */
  --sq-white:          #FFFFFF;
  --sq-surface:        #F9F8FF;
  --sq-surface-2:      #F3F4F6;
  --sq-border:         #E5E7EB;

  /* Text */
  --sq-text:           #0F172A;
  --sq-text-light:     #6B7280;
  --sq-text-xlight:    #9CA3AF;

  /* Status */
  --sq-success:        #059669;
  --sq-success-light:  #D1FAE5;
  --sq-danger:         #DC2626;
  --sq-danger-light:   #FEE2E2;
  --sq-warning:        #D97706;
  --sq-warning-light:  #FEF3C7;

  /* Layout */
  --sq-container:      1100px;
  --sq-radius:         8px;
  --sq-radius-lg:      12px;
  --sq-radius-xl:      16px;
  --sq-shadow:         0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --sq-shadow-sm:      0 1px 3px rgba(45, 10, 94, 0.08);
  --sq-shadow-md:      0 4px 16px rgba(45, 10, 94, 0.12);
  --sq-shadow-lg:      0 8px 32px rgba(45, 10, 94, 0.16);

  /* Spacing scale */
  --sq-space-1:  4px;
  --sq-space-2:  8px;
  --sq-space-3:  12px;
  --sq-space-4:  16px;
  --sq-space-5:  24px;
  --sq-space-6:  32px;
  --sq-space-7:  48px;
  --sq-space-8:  64px;
  --sq-space-9:  80px;
  --sq-space-10: 120px;

  /* Semi-transparent primary for overlays and shadows */
  --sq-primary-10:     rgba(45, 10, 94, 0.10);
  --sq-primary-15:     rgba(45, 10, 94, 0.15);
  --sq-primary-20:     rgba(45, 10, 94, 0.20);
  --sq-primary-50:     rgba(45, 10, 94, 0.50);

  /* Semi-transparent purple-mid */
  --sq-purple-mid-10:  rgba(109, 40, 217, 0.08);
  --sq-purple-mid-15:  rgba(109, 40, 217, 0.15);

  /* Semi-transparent accent (crimson) */
  --sq-accent-10:      rgba(196, 30, 58, 0.10);
  --sq-accent-20:      rgba(196, 30, 58, 0.20);

  /* Gradient standards */
  --sq-gradient-primary: linear-gradient(135deg, #2D0A5E 0%, #3D1278 100%);
  --sq-gradient-hero:    linear-gradient(135deg, #2D0A5E 0%, #4A1A8A 60%, #3D1278 100%);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sq-text);
  background: var(--sq-white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sq-text);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { line-height: 1.7; color: var(--sq-text); }
.sq-lead { font-size: 1.125rem; color: var(--sq-text-light); line-height: 1.7; }

/* Brand name treatment — "SQE" Inter Bold, "wise" Fraunces italic. Size and colour inherit from context. */
.sq-brand-sqe {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
.sq-brand-wise {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
}

/* ---- Layout utilities ---- */
.sq-container {
  max-width: var(--sq-container);
  margin: 0 auto;
  padding: 0 var(--sq-space-5);
}
.sq-section { padding: var(--sq-space-9) 0; }
.sq-section--sm { padding: var(--sq-space-7) 0; }
.sq-section--lg { padding: var(--sq-space-10) 0; }

/* ---- Buttons ---- */
.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sq-space-2);
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: 100px;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.sq-btn--primary {
  background: var(--sq-primary);
  color: var(--sq-white);
}
.sq-btn--primary:hover { background: var(--sq-primary-hover); color: var(--sq-white); }
.sq-btn--accent {
  background: var(--sq-accent);
  color: var(--sq-white);
}
.sq-btn--accent:hover { background: var(--sq-accent-hover); color: var(--sq-white); }
.sq-btn--outline {
  background: transparent;
  color: var(--sq-primary);
  border: 2px solid var(--sq-primary);
}
.sq-btn--outline:hover { background: var(--sq-primary); color: var(--sq-white); }
.sq-btn--outline-white {
  background: transparent;
  color: var(--sq-white);
  border: 2px solid rgba(255,255,255,0.6);
}
.sq-btn--outline-white:hover { background: rgba(255,255,255,0.15); color: var(--sq-white); }
.sq-btn--ghost {
  background: transparent;
  color: var(--sq-text-light);
}
.sq-btn--ghost:hover { color: var(--sq-text); background: var(--sq-surface-2); }
.sq-btn--sm { padding: 7px 14px; font-size: 13px; }
.sq-btn--lg,
.sq-btn--large { padding: 14px 28px; font-size: 17px; }
.sq-btn--full { width: 100%; display: flex; }
.sq-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Cards ---- */
.sq-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  box-shadow: var(--sq-shadow);
  padding: var(--sq-space-6);
}
.sq-card--elevated { box-shadow: var(--sq-shadow-lg); }
.sq-card--purple-top { border-top: 3px solid var(--sq-purple-mid); }
.sq-card--accent-top { border-top: 3px solid var(--sq-accent); }
.sq-card--primary-top { border-top: 3px solid var(--sq-primary); }

/* ---- Badges ---- */
.sq-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
.sq-badge--purple { background: var(--sq-primary-light); color: var(--sq-primary); }
.sq-badge--accent { background: var(--sq-danger-light); color: var(--sq-accent); }
.sq-badge--success { background: var(--sq-success-light); color: var(--sq-success); }
.sq-badge--warning { background: var(--sq-warning-light); color: var(--sq-warning); }
.sq-badge--danger { background: var(--sq-danger-light); color: var(--sq-danger); }
.sq-badge--neutral { background: var(--sq-surface-2); color: var(--sq-text-light); }

/* ---- FLK paper badges (used across app + marketing) ---- */
.sq-flk1-badge {
  background: var(--sq-primary-light);
  color: var(--sq-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
  display: inline-block;
}
.sq-flk2-badge {
  background: var(--sq-primary-light);
  color: var(--sq-purple-mid);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
  display: inline-block;
}

/* ---- Forms ---- */
.sq-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--sq-text);
  margin-bottom: var(--sq-space-1);
}
.sq-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--sq-border);
  border-radius: var(--sq-radius);
  font-size: 15px;
  color: var(--sq-text);
  background: var(--sq-white);
  transition: border-color 0.15s;
  outline: none;
}
.sq-input:focus { border-color: var(--sq-purple-mid); box-shadow: 0 0 0 3px rgba(109,40,217,0.1); }
.sq-input--error { border-color: var(--sq-danger); }
.sq-form-group { margin-bottom: var(--sq-space-5); }
.sq-form-error { font-size: 13px; color: var(--sq-danger); margin-top: var(--sq-space-1); }

/* ---- Dividers ---- */
.sq-divider { height: 1px; background: var(--sq-border); border: none; margin: var(--sq-space-6) 0; }

/* ---- Section labels ---- */
.sq-section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sq-purple-mid);
  margin-bottom: var(--sq-space-3);
}

/* ---- Responsive grid ---- */
.sq-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sq-space-5); }
.sq-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sq-space-5); }
.sq-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sq-space-5); }
@media (max-width: 900px) {
  .sq-grid-3, .sq-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sq-grid-2, .sq-grid-3, .sq-grid-4 { grid-template-columns: 1fr; }
}

/* ---- Skeleton loaders ---- */
.sq-skeleton {
  background: linear-gradient(90deg, var(--sq-surface-2) 25%, var(--sq-surface) 50%, var(--sq-surface-2) 75%);
  background-size: 200% 100%;
  animation: sq-shimmer 1.5s infinite;
  border-radius: var(--sq-radius);
}
@keyframes sq-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid var(--sq-purple-mid); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }