/*
 * Maninder English design system foundation.
 * Phase 1: shared tokens, type, spacing, shadows, components, and motion.
 */

:root {
  color-scheme: light;

  --me-white: #ffffff;
  --me-cream-50: #fbfaf7;
  --me-cream-100: #f7f4ee;
  --me-cream-200: #efebe2;
  --me-ink-900: #111827;
  --me-ink-800: #1a2540;
  --me-ink-700: #263354;
  --me-muted-700: #4a5568;
  --me-muted-600: #64748b;
  --me-muted-500: #7c8798;
  --me-border: #e8e4dc;
  --me-border-strong: #d9d2c5;

  --me-violet-700: #5220c8;
  --me-violet-600: #6633dd;
  --me-violet-500: #8b6cf6;
  --me-violet-100: #ede8fb;
  --me-blue-600: #2563eb;
  --me-green-700: #047857;
  --me-green-100: #ecfdf5;
  --me-red-700: #c81c1c;
  --me-red-100: #fef2f2;
  --me-saffron-700: #b5470f;
  --me-saffron-600: #c97a10;
  --me-saffron-100: #fef3c7;

  --me-font-display: "Plus Jakarta Sans", sans-serif;
  --me-font-body: "Inter", sans-serif;
  --me-font-hindi: "Noto Sans Devanagari", sans-serif;

  --me-space-1: 4px;
  --me-space-2: 8px;
  --me-space-3: 12px;
  --me-space-4: 16px;
  --me-space-5: 20px;
  --me-space-6: 24px;
  --me-space-8: 32px;
  --me-space-10: 40px;
  --me-space-12: 48px;
  --me-space-14: 56px;
  --me-space-16: 64px;
  --me-space-20: 80px;
  --me-space-24: 96px;

  --me-radius-xs: 6px;
  --me-radius-sm: 8px;
  --me-radius-md: 12px;
  --me-radius-lg: 16px;
  --me-radius-xl: 20px;
  --me-radius-2xl: 24px;
  --me-radius-pill: 999px;

  --me-shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
  --me-shadow-sm: 0 2px 10px rgba(26, 37, 64, .06);
  --me-shadow-md: 0 10px 30px rgba(26, 37, 64, .10);
  --me-shadow-lg: 0 20px 50px rgba(26, 37, 64, .14);
  --me-shadow-violet: 0 14px 34px rgba(102, 51, 221, .22);

  --me-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --me-ease-out: cubic-bezier(.22, 1, .36, 1);
  --me-ease-emphatic: cubic-bezier(.16, 1, .3, 1);
  --me-duration-fast: 160ms;
  --me-duration-base: 240ms;
  --me-duration-slow: 520ms;

  /* Existing template aliases. Keep old pages working while new CSS uses me-* names. */
  --bg: var(--me-cream-100);
  --white: var(--me-white);
  --card: var(--me-cream-100);
  --off: var(--me-cream-50);
  --navy: var(--me-ink-800);
  --navy2: var(--me-ink-700);
  --muted: var(--me-muted-600);
  --border: var(--me-border);
  --violet: var(--me-violet-600);
  --vd: var(--me-violet-700);
  --vm: var(--me-violet-500);
  --vl: var(--me-violet-100);
  --saffron: var(--me-saffron-600);
  --sfdeep: var(--me-saffron-700);
  --sbg: var(--me-saffron-100);
  --green: var(--me-green-700);
  --gbg: var(--me-green-100);
  --red: var(--me-red-700);
  --rbg: var(--me-red-100);
  --d: var(--me-font-display);
  --b: var(--me-font-body);
  --h: var(--me-font-hindi);
  --e2: var(--me-ease-out);
  --e3: var(--me-ease-emphatic);
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--me-font-body);
  color: var(--me-ink-900);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--me-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.me-display {
  font-family: var(--me-font-display);
  color: var(--me-ink-900);
  letter-spacing: 0;
}

p {
  line-height: 1.72;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid rgba(102, 51, 221, .22);
  outline-offset: 3px;
}

::selection {
  background: rgba(102, 51, 221, .16);
  color: var(--me-ink-900);
}

.me-container,
.wrap {
  width: 100%;
  max-width: min(1160px, calc(100vw - 40px));
  margin-inline: auto;
}

.me-section {
  padding-block: clamp(var(--me-space-14), 7vw, var(--me-space-24));
}

.me-section-compact {
  padding-block: clamp(var(--me-space-10), 5vw, var(--me-space-16));
}

.me-kicker,
.sh .eye,
.gh-tag,
.vh-eyebrow,
.vh-section-eyebrow,
.tense-eye,
.lh-eye {
  display: inline-flex;
  align-items: center;
  gap: var(--me-space-2);
  width: fit-content;
  min-height: 28px;
  padding: 6px 14px;
  border: 1px solid rgba(102, 51, 221, .14);
  border-radius: var(--me-radius-pill);
  background: var(--me-violet-100);
  color: var(--me-violet-600);
  font-family: var(--me-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.me-card,
.me-lesson-card,
.me-srs-card,
.me-srs-login-prompt {
  background: var(--me-white);
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius-lg);
  box-shadow: var(--me-shadow-xs);
}

.me-card,
.me-lesson-card,
.me-srs-card {
  transition:
    transform var(--me-duration-base) var(--me-ease-out),
    box-shadow var(--me-duration-base) var(--me-ease-out),
    border-color var(--me-duration-base) var(--me-ease-standard),
    background-color var(--me-duration-base) var(--me-ease-standard);
}

.me-card:hover,
.me-lesson-card:hover {
  border-color: rgba(102, 51, 221, .24);
  box-shadow: var(--me-shadow-md);
  transform: translateY(-4px);
}

.me-btn,
.btn,
.btn-solid,
.btn-outline,
.btn-outline-dk,
.btn-outline-lt,
.me-srs-login-btn,
.me-srs-reveal-btn,
.me-srs-restart-btn,
.me-filter-btn,
.me-pg-btn,
.vh-nudge-btn,
.nav-yt,
.btn-yt {
  transition:
    transform var(--me-duration-base) var(--me-ease-out),
    box-shadow var(--me-duration-base) var(--me-ease-out),
    border-color var(--me-duration-fast) var(--me-ease-standard),
    background-color var(--me-duration-fast) var(--me-ease-standard),
    color var(--me-duration-fast) var(--me-ease-standard);
}

.me-btn:hover,
.btn:hover,
.btn-solid:hover,
.btn-outline:hover,
.btn-outline-dk:hover,
.btn-outline-lt:hover,
.me-srs-login-btn:hover,
.me-srs-reveal-btn:hover,
.me-srs-restart-btn:hover,
.vh-nudge-btn:hover,
.nav-yt:hover,
.btn-yt:hover {
  transform: translateY(-2px);
}

.me-gradient-primary,
.me-srs-reveal-btn,
.me-srs-restart-btn {
  background: linear-gradient(135deg, var(--me-violet-600), var(--me-violet-500));
}

.me-hindi,
.hn,
.gh-hi,
.vh-hero-hindi,
.lh-hi,
.ls-hi,
.foot-hi {
  font-family: var(--me-font-hindi);
}

.me-prose {
  color: var(--me-muted-700);
  font-size: 16px;
  line-height: 1.78;
}

.me-prose > * + * {
  margin-top: var(--me-space-5);
}

.me-reveal,
.fade,
.hs-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--me-duration-slow) var(--me-ease-out),
    transform var(--me-duration-slow) var(--me-ease-out);
  transition-delay: var(--me-delay, 0ms);
  will-change: opacity, transform;
}

.me-reveal.from-left,
.fade.from-left,
.fade.fromLeft,
.hs-reveal.from-left {
  transform: translateX(-24px);
}

.me-reveal.from-right,
.fade.from-right,
.fade.fromRight,
.hs-reveal.from-right {
  transform: translateX(24px);
}

.me-reveal.scale-in,
.hs-reveal.scale-in {
  transform: translateY(12px) scale(.98);
}

.me-reveal.is-visible,
.me-reveal.in,
.fade.in,
.hs-reveal.hs-visible,
.hs-reveal.in {
  opacity: 1;
  transform: none;
}

.d1,
.hs-d1 {
  --me-delay: 70ms;
}

.d2,
.hs-d2 {
  --me-delay: 140ms;
}

.d3,
.hs-d3 {
  --me-delay: 210ms;
}

.d4,
.hs-d4 {
  --me-delay: 280ms;
}

.d5,
.hs-d5 {
  --me-delay: 350ms;
}

.d6,
.hs-d6 {
  --me-delay: 420ms;
}

@media (max-width: 768px) {
  .me-container,
  .wrap {
    max-width: calc(100vw - 32px);
  }

  .me-section {
    padding-block: clamp(var(--me-space-10), 10vw, var(--me-space-16));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .me-reveal,
  .fade,
  .hs-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}