/* SwayamAI UI refresh — soft cards, gradients, and compact spacing */
/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Typography Variables - SwayamAI Standard */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes - Hierarchical Scale (11px-32px) */
  --font-size-xs: 0.6875rem;    /* 11px - tiny labels, badges */
  --font-size-sm: 0.8125rem;    /* 13px - small text, captions */
  --font-size-base: 0.875rem;   /* 14px - body text */
  --font-size-md: 1rem;         /* 16px - emphasis, large body */
  --font-size-lg: 1.125rem;     /* 18px - sub-headers */
  --font-size-xl: 1.25rem;      /* 20px - section headers */
  --font-size-2xl: 1.5rem;      /* 24px - page headers */
  --font-size-3xl: 2rem;        /* 32px - hero titles */
  
  /* Line Heights */
  --line-height-tight: 1.2;     /* Headers */
  --line-height-normal: 1.5;    /* Body text */
  --line-height-relaxed: 1.6;   /* Long-form content */
  
  /* Color Variables */
  --sa-bg: #f5f7fb;
  --sa-surface: #ffffff;
  --sa-text: #0f172a; /* slate-900 - WCAG AA 4.5:1 */
  --sa-muted: #475569; /* slate-600 */
  --sa-primary: #6366f1; /* indigo-500 */
  --sa-primary-2: #8b5cf6; /* violet-500 */
  --sa-accent: #22d3ee; /* cyan-400 */
  --sa-shadow-light: 0 12px 24px rgba(15,23,42,.06), 0 4px 8px rgba(2,6,23,.06);
  --sa-shadow-inset: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(2,6,23,.05);
}

.dark:root{
  /* Dark mode keeps same typography variables, only colors change */
  --sa-bg: #0b1220;
  --sa-surface: #111827;
  --sa-text: #e2e8f0; /* slate-200 - WCAG AA compliant */
  --sa-muted: #94a3b8; /* slate-400 */
  --sa-primary: #7c83ff;
  --sa-primary-2: #a78bfa;
  --sa-accent: #22d3ee;
  --sa-shadow-light: 0 12px 28px rgba(0,0,0,.45), 0 6px 12px rgba(0,0,0,.35);
  --sa-shadow-inset: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35);
}

/* Global Typography Application */
body{
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  background: var(--sa-bg) !important;
  color: var(--sa-text) !important;
}

/* Headings */
h1, .h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h2, .h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
h3, .h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h4, .h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h5, .h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }
h6, .h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); }

/* Text Variants */
.text-xs { font-size: var(--font-size-xs); }
.text-sm, small { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* Font Weights */
.font-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold, .fw-semibold { font-weight: var(--font-weight-semibold); }
.font-bold, .fw-bold { font-weight: var(--font-weight-bold); }

/* Forms & Inputs */
.form-label, label { 
  font-size: var(--font-size-base); 
  font-weight: var(--font-weight-medium); 
  line-height: var(--line-height-normal);
}
.form-text { 
  font-size: var(--font-size-sm); 
  line-height: var(--line-height-normal);
}
.form-control, .form-select, input, textarea, select {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* Buttons */
.btn {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}
.btn-sm { font-size: var(--font-size-sm); }
.btn-lg { font-size: var(--font-size-md); }

/* Tables */
.table {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.table thead th {
  font-weight: var(--font-weight-semibold);
}

/* Badges & Pills */
.badge {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Navigation */
.nav-link {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* Long-form content */
.content-long-form, article, .article {
  line-height: var(--line-height-relaxed);
}

/* Responsive Typography - Mobile optimization */
@media (max-width: 768px) {
  :root {
    --font-size-3xl: 1.75rem;  /* 28px on mobile */
    --font-size-2xl: 1.375rem; /* 22px on mobile */
    --font-size-xl: 1.125rem;  /* 18px on mobile */
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-3xl: 1.5rem;   /* 24px on small mobile */
    --font-size-2xl: 1.25rem;  /* 20px on small mobile */
  }
}

.sa-hero{
  background: radial-gradient(1200px 480px at 10% -20%, rgba(99,102,241,.25), transparent 60%),
              radial-gradient(1200px 520px at 90% 0%, rgba(139,92,246,.18), transparent 60%),
              linear-gradient(180deg, var(--sa-surface), var(--sa-surface));
  border-radius: 24px;
  box-shadow: var(--sa-shadow-light);
  /* reduce visual height (override Bootstrap p-4 p-md-5 mb-4) */
  padding: .75rem 1rem !important;
  margin-bottom: .75rem !important;
}

.sa-card{
  background: var(--sa-surface);
  border-radius: 18px;
  box-shadow: var(--sa-shadow-light);
  border: 1px solid rgba(148,163,184,.18);
}

.sa-card-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.55));
  backdrop-filter: blur(6px);
}
.dark .sa-card-soft{
  background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.75));
}

.sa-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-2));
  color:#fff; border-radius:999px; padding:.35rem .65rem; font-weight:600; font-size:.8rem;
  box-shadow: 0 6px 14px rgba(99,102,241,.35);
}

.sa-btn-primary{
  background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-2));
  color:#fff; border:none;
  box-shadow: 0 8px 18px rgba(99,102,241,.35);
}
.sa-btn-primary:hover{ filter: brightness(1.06); color:#fff; }

.sa-badge{
  background: rgba(99,102,241,.12); color: var(--sa-primary); font-weight:600;
  border: 1px solid rgba(99,102,241,.25); border-radius: 999px; padding:.25rem .5rem; font-size:.75rem;
}

.sa-icon-3d{
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(145deg, rgba(99,102,241,.95), rgba(139,92,246,.95));
  box-shadow: var(--sa-shadow-light), var(--sa-shadow-inset);
  color:#fff; display:grid; place-items:center; font-size:1.1rem;
}

.sa-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:18px;
}

/* File input compact styling inside table/cards */
.uc-file.form-control.form-control-sm{
  padding:.35rem .5rem; height:calc(1.625rem + 2px); font-size:.875rem;
}

/* Table nicer contrast */
table.table{--bs-table-bg:transparent}
table.table thead th{color: var(--sa-muted)}

/* Choices.js color alignment */
.choices__inner{background:var(--sa-surface); box-shadow: var(--sa-shadow-inset);}
.choices__list--dropdown{box-shadow: var(--sa-shadow-light)}

/* Footer subtle */
footer{opacity:.9}

/* Optional: tweak SA icon svg paths */
.sa-icon-3d svg{width:22px; height:22px}
.sa-icon-3d svg .g{stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none}
.sa-icon-3d svg .f{fill:#fff;}