/* ============================================================
   Updater Computer Learning — Shared Design System
   Vibrant • Minimal • Responsive • Accessible
   Loaded BEFORE page stylesheets so tokens cascade everywhere.
   ============================================================ */

:root {
  /* ── Vibrant Palette ─────────────────────────────────── */
  --c-primary:      #6366f1;   /* indigo  */
  --c-primary-600:  #4f46e5;
  --c-primary-700:  #4338ca;
  --c-secondary:    #8b5cf6;   /* violet  */
  --c-accent:       #06b6d4;   /* cyan    */
  --c-pink:         #ec4899;   /* rose    */
  --c-orange:       #f97316;
  --c-amber:        #f59e0b;
  --c-success:      #10b981;
  --c-warning:      #f59e0b;
  --c-danger:       #ef4444;
  --c-info:         #3b82f6;

  /* Soft background tints */
  --c-bg-primary:   #eef2ff;
  --c-bg-success:   #d1fae5;
  --c-bg-warning:   #fef3c7;
  --c-bg-danger:    #fee2e2;
  --c-bg-info:      #dbeafe;

  /* Neutrals */
  --c-bg:           #f6f8ff;
  --c-surface:      #ffffff;
  --c-surface-2:    #f8fafc;
  --c-border:       #e2e8f0;
  --c-border-strong:#cbd5e1;
  --c-text:         #0f172a;
  --c-text-2:       #1e293b;
  --c-muted:        #64748b;
  --c-muted-2:      #94a3b8;

  /* Gradients */
  --g-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --g-accent:  linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --g-warm:    linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  --g-cool:    linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
  --g-hero:    linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fz-xs:   .75rem;
  --fz-sm:   .875rem;
  --fz-md:   1rem;
  --fz-lg:   1.125rem;
  --fz-xl:   1.375rem;
  --fz-2xl:  1.75rem;
  --fz-3xl:  2.25rem;
  --fz-4xl:  clamp(2rem, 5vw, 3.25rem);
  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* Spacing scale */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;

  /* Radii */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(15,23,42,.06);
  --sh-sm: 0 2px 6px rgba(15,23,42,.07);
  --sh-md: 0 6px 18px rgba(15,23,42,.08);
  --sh-lg: 0 18px 40px -12px rgba(15,23,42,.18);
  --sh-glow: 0 8px 24px rgba(99,102,241,.30);

  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .2s cubic-bezier(.4,0,.2,1);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(99,102,241,.35);
}

/* ── Better defaults ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  font-family: var(--font-sans);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Visible, accessible focus everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* Comfortable tap targets on touch devices */
@media (pointer: coarse) {
  button, .btn, .lp-btn, .auth-btn, a.nav-link, .pagination-btn {
    min-height: 44px;
  }
}

/* Prevent horizontal overflow caused by oversized children */
html, body { overflow-x: hidden; }