/* Lærry Design System
   --------------------------------------------------
   A calm, premium teacher-product UI:
   - Inter only
   - warm neutral surfaces
   - one strong purple primary
   - restrained gradients
   - monochrome product icons
   - emojis reserved for playful/success moments
*/

:root {
  /* Brand */
  --laerry-brand: #5B3FF2;
  --laerry-brand-hover: #4931D4;
  --laerry-brand-ink: #3322A8;
  --laerry-brand-soft: #EFECFF;

  /* Accents */
  --laerry-mint: #2DD4BF;
  --laerry-mint-soft: #E7FBF7;
  --laerry-amber: #F59E0B;
  --laerry-amber-soft: #FFF4DA;
  --laerry-danger: #EF4444;

  /* Neutrals */
  --laerry-ink: #17171D;
  --laerry-ink-soft: #2B2D33;
  --laerry-muted: #6B6673;
  --laerry-muted-2: #918A9B;
  --laerry-bg: #F7F4EE;
  --laerry-bg-cool: #F6F7FB;
  --laerry-surface: #FFFFFF;
  --laerry-surface-soft: rgba(255,255,255,.78);
  --laerry-border: rgba(23,23,29,.10);
  --laerry-border-strong: rgba(23,23,29,.16);

  /* Dark */
  --laerry-anthracite: #222326;
  --laerry-anthracite-2: #17181B;

  /* Typography */
  --laerry-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --laerry-h1: clamp(3.2rem, 7.4vw, 6.4rem);
  --laerry-h2: clamp(2.1rem, 4.5vw, 3.6rem);
  --laerry-h3: clamp(1.45rem, 2.6vw, 2.1rem);
  --laerry-body-lg: clamp(1.05rem, 1.7vw, 1.22rem);
  --laerry-body: 1rem;
  --laerry-small: .88rem;

  --laerry-track-hero: -.075em;
  --laerry-track-headline: -.045em;
  --laerry-track-ui: -.015em;
  --laerry-track-label: .055em;

  /* Shape & depth */
  --laerry-radius-sm: 14px;
  --laerry-radius-md: 20px;
  --laerry-radius-lg: 28px;
  --laerry-radius-xl: 36px;
  --laerry-shadow-sm: 0 10px 28px rgba(31,27,46,.06);
  --laerry-shadow-md: 0 18px 56px rgba(31,27,46,.09);
  --laerry-shadow-lg: 0 30px 90px rgba(31,27,46,.14);

  /* Gradients: only these, unless a page has a strong reason */
  --laerry-gradient-primary: linear-gradient(135deg, #5B3FF2 0%, #7C3AED 100%);
  --laerry-gradient-dark: linear-gradient(135deg, #17181B 0%, #272142 58%, #222326 100%);
  --laerry-gradient-page:
    radial-gradient(circle at 10% 4%, rgba(45,212,191,.14), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(91,63,242,.13), transparent 30rem),
    linear-gradient(180deg, #FFFFFF 0%, #F7F4EE 78%);
}

/* Backwards-compatible aliases for older CSS */
:root {
  --primary: var(--laerry-brand);
  --primary-dark: var(--laerry-brand-hover);
  --cyan: var(--laerry-mint);
  --ink: var(--laerry-ink);
  --muted: var(--laerry-muted);
  --soft: var(--laerry-brand-soft);
  --text: var(--laerry-ink);
  --ev: var(--laerry-brand);
  --ev2: #7C3AED;
  --font-body: var(--laerry-font);
  --font-display: var(--laerry-font);
  --laerry-primary: var(--laerry-brand);
  --laerry-primary-dark: var(--laerry-brand-hover);
  --laerry-cyan: var(--laerry-mint);
  --laerry-ink: #17171D;
  --laerry-muted: #6B6673;
  --laerry-soft: var(--laerry-brand-soft);
  --laerry-card: #FFFFFF;
  --laerry-font-body: var(--laerry-font);
  --laerry-font-display: var(--laerry-font);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--laerry-font);
  color: var(--laerry-ink);
  letter-spacing: 0;
}

/* Global type rhythm */
h1, .h1 {
  font-family: var(--laerry-font);
  font-weight: 900;
  letter-spacing: var(--laerry-track-hero);
  line-height: .9;
}

h2, .h2 {
  font-family: var(--laerry-font);
  font-weight: 850;
  letter-spacing: var(--laerry-track-headline);
  line-height: 1.02;
}

h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--laerry-font);
  font-weight: 800;
  letter-spacing: -.025em;
}

p, li, input, select, textarea, button {
  font-family: var(--laerry-font);
}

p {
  letter-spacing: 0;
}

label, .form-label {
  color: var(--laerry-ink);
  font-weight: 750;
  letter-spacing: var(--laerry-track-ui);
}

/* Buttons */
.btn {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: var(--laerry-track-ui);
}

.btn-primary,
.btn.btn-primary {
  background: var(--laerry-gradient-primary);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(91,63,242,.22);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background: linear-gradient(135deg, var(--laerry-brand-hover), #6D28D9);
  border-color: transparent;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--laerry-brand);
  border-color: rgba(91,63,242,.36);
}

.btn-outline-primary:hover {
  background: var(--laerry-brand);
  border-color: var(--laerry-brand);
}

/* Forms */
.form-control,
.form-select {
  border-radius: var(--laerry-radius-sm);
  border-color: rgba(23,23,29,.12);
  min-height: 46px;
  font-weight: 600;
  color: var(--laerry-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(91,63,242,.44);
  box-shadow: 0 0 0 .22rem rgba(91,63,242,.12);
}

/* Cards */
.card-soft,
.laerry-card,
.teacher-card,
.support-card,
.legal-card {
  border: 1px solid var(--laerry-border);
  border-radius: var(--laerry-radius-lg);
  background: rgba(255,255,255,.90);
  box-shadow: var(--laerry-shadow-md);
}

/* App/product icons: mono, premium, reusable */
.laerry-ui-icon {
  width: 1.15em;
  min-width: 1.15em;
  height: 1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 1.05em;
  line-height: 1;
}

.laerry-icon-box {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 15px;
  color: var(--laerry-brand);
  background: var(--laerry-brand-soft);
}

/* Product layout overrides */
.admin-layout {
  background: var(--laerry-gradient-page);
}

.admin-main {
  color: var(--laerry-ink);
}

.admin-page-head h1 {
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  letter-spacing: var(--laerry-track-hero);
  line-height: .9;
  font-weight: 900;
}

.admin-page-head p {
  color: var(--laerry-muted);
  font-size: var(--laerry-body-lg);
  font-weight: 600;
  letter-spacing: 0;
}

.admin-sidebar {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
}

.admin-brand {
  color: var(--laerry-brand);
  font-family: var(--laerry-font);
  letter-spacing: -.06em;
  font-weight: 900;
}

.admin-nav a {
  align-items: center;
  color: var(--laerry-ink);
  gap: 12px;
  font-weight: 800;
  letter-spacing: var(--laerry-track-ui);
}

.admin-nav a:hover,
.admin-nav a.active {
  background: var(--laerry-brand-soft);
  color: var(--laerry-brand-ink);
}

/* Useful page backgrounds */
.laerry-soft-page {
  background: var(--laerry-gradient-page);
}

.laerry-anthracite {
  background: var(--laerry-anthracite);
  color: #fff;
}

/* Emoji policy:
   Emojis are still welcome in .playful, .success and student-facing moments.
   Product navigation should use .laerry-ui-icon / Bootstrap Icons instead. */
.laerry-playful-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}


/* Product UI icon policy
   Emojis are reserved for quizzes, reactions and playful success states.
   Navigation and context menus use monochrome line icons. */
.laerry-nav-icon,
.laerry-menu-icon,
.laerry-ui-icon {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
}

.admin-nav a,
.teacher-user-menu .dropdown-item,
.laerry-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .72rem;
}

.admin-nav a span,
.teacher-user-menu .dropdown-item span,
.laerry-user-menu .dropdown-item span {
  min-width: 0;
}