/* ============================================================
   base.css — tokens, reset, typography, shared utilities
   Module Six web app
   ============================================================ */

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

:root {
  /* Brand colours */
  --blue-900: #0D2B6B;
  --blue-800: #1B4FD8;
  --blue-700: #2563EB;
  --blue-600: #3B82F6;
  --blue-200: #BFDBFE;
  --blue-100: #DBEAFE;
  --blue-50:  #EBF1FF;

  /* Semantic */
  --color-primary:        #1B4FD8;
  --color-primary-hover:  #1640B8;
  --color-primary-light:  #EBF1FF;
  --color-primary-border: #BFDBFE;

  --color-success:        #16A34A;
  --color-success-light:  #DCFCE7;
  --color-warning:        #B45309;
  --color-warning-light:  #FEF3C7;
  --color-danger:         #A32D2D;
  --color-danger-light:   #FEE2E2;

  /* Neutrals */
  --color-text-primary:   #111827;
  --color-text-secondary: #6B7280;
  --color-text-hint:      #9CA3AF;

  --color-bg-page:        #F5F7FA;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F9FAFB;

  --color-border-light:   rgba(0,0,0,0.07);
  --color-border:         rgba(0,0,0,0.12);
  --color-border-strong:  rgba(0,0,0,0.20);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  26px;

  /* Layout */
  --topnav-height:  52px;
  --sidebar-width:  220px;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: 1.6;
  min-height: 100vh;
}

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

a:hover {
  text-decoration: underline;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* ── Layout shell ── */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  min-height: calc(100vh - var(--topnav-height));
}

.app-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Utility classes ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-hint      { color: var(--color-text-hint); }
.text-blue      { color: var(--color-primary); }

.font-medium { font-weight: 500; }

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { 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); }

.uppercase    { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.07em; }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.flex-1 { flex: 1; }

.w-full  { width: 100%; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ── Progress bar ── */

.progress-track {
  height: 4px;
  background: var(--color-border-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-track--thin {
  height: 3px;
}

.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.progress-fill--success { background: var(--color-success); }
.progress-fill--warning { background: #EF9F27; }
.progress-fill--danger  { background: #E24B4A; }