/* ============================================================
   Educatone — Design Tokens & Base
   Clean minimalism · Indigo · Adult e-learning platform
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --color-primary:        #4F46E5;   /* Indigo 600 */
  --color-primary-hover:  #4338CA;   /* Indigo 700 */
  --color-primary-soft:   #EEF2FF;   /* Indigo 50  */
  --color-primary-ring:   rgba(79, 70, 229, .35);

  /* Semantic */
  --color-success:  #16A34A;
  --color-success-soft: #DCFCE7;
  --color-warning:  #D97706;
  --color-warning-soft: #FEF3C7;
  --color-danger:   #DC2626;
  --color-danger-soft:  #FEE2E2;
  --color-info:     #0EA5E9;

  /* Neutrals */
  --bg:          #F8FAFC;   /* app background   */
  --surface:     #FFFFFF;   /* cards / panels   */
  --surface-2:   #F1F5F9;   /* subtle fill      */
  --text:        #0F172A;   /* primary text     */
  --text-soft:   #475569;   /* secondary text   */
  --text-muted:  #94A3B8;   /* tertiary / hints */
  --border:      #E2E8F0;
  --border-strong:#CBD5E1;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Shadows (soft, minimal) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --shadow-primary: 0 8px 24px rgba(79, 70, 229, .28);

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

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 200ms;

  /* Layout */
  --container: 1200px;
  --sidebar-w: 260px;
  --header-h: 68px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- Reusable primitives ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-6);
  font-size: 15px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-block { width: 100%; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-soft { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.btn-soft:hover { background: #E0E7FF; }
.btn-sm { height: 38px; padding: 0 var(--space-4); font-size: 14px; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label { font-size: 14px; font-weight: 600; color: var(--text); }
.input {
  min-height: 48px; padding: 10px var(--space-4);
  font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%;
}
.input::placeholder { color: var(--text-muted); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-ring); }
.hint { font-size: 13px; color: var(--text-muted); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-full); background: var(--surface-2); color: var(--text-soft);
}
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.badge-success { background: var(--color-success-soft); color: #15803D; }
.badge-warning { background: var(--color-warning-soft); color: #B45309; }
.badge-danger { background: var(--color-danger-soft); color: #B91C1C; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}