/* Lingo Premium Design System Tokens & Components */

:root {
  /* Font Family Definition */
  --font-nunito: "Nunito","Baloo 2","Quicksand",system-ui,-apple-system,sans-serif;

  /* Neutrals & Surfaces */
  --neutral-primary-soft: #ffffff;
  --neutral-primary: #ffffff;
  --neutral-primary-medium: #ffffff;
  --neutral-primary-strong: #ffffff;
  --neutral-secondary-soft: #ffffff;
  --neutral-secondary: #ffffff;
  --neutral-secondary-medium: #f7f7f7;
  --neutral-secondary-strong: #f7f7f7;
  --neutral-tertiary-soft: #f7f7f7;
  --neutral-tertiary: #f7f7f7;
  --neutral-tertiary-medium: #e5e5e5;
  --neutral-quaternary: #e5e5e5;
  --heading: #4b4b4b;
  --body: #777777;
  --body-subtle: #afafaf;
  --disabled: #f7f7f7;
  
  /* Brand (Green) */
  --brand: #58cc03;
  --brand-medium: #89e219;
  --brand-strong: #58a700;
  --brand-soft: #c7f8a1;
  --brand-softer: #e5ffc2;
  --fg-brand: #58a700;
  --fg-brand-strong: #3d7400;
  --border-brand: #58cc03;
  --border-brand-subtle: #c7f8a1;
  
  /* Success */
  --success: #58cc02;
  --success-medium: #c7f8a1;
  --success-strong: #58a700;
  --success-soft: #e5ffc2;

  /* Danger (Red) */
  --danger: #ff4b4b;
  --danger-medium: #ffc4c4;
  --danger-strong: #e62e2e;
  --danger-soft: #ffe5e5;
  --fg-danger: #e62e2e;
  --fg-danger-strong: #b71f1f;
  --border-danger: #e62e2e;

  /* Warning (Yellow) */
  --warning: #ffc800;
  --warning-medium: #ffe89b;
  --warning-strong: #e6b400;
  --warning-soft: #fff8e0;
  --fg-warning: #8a6f00;
  --border-warning: #e6b400;

  /* Playful Accents */
  --purple: #ce82ff;
  --sky: #1cb0f6;
  --teal: #00cd9c;
  --pink: #ff86d0;
  --cyan: #1cb0f6;
  --orange: #ff9600;
  --indigo: #8549ba;
  
  /* Borders */
  --border-default: #e5e5e5;
  --border-default-strong: #dbdbdb;

  /* 3D Tactile Shadows */
  --shadow-brand: #58a700;
  --shadow-success: #58a700;
  --shadow-danger: #e62e2e;
  --shadow-warning: #e6b400;
  --shadow-secondary: #e5e5e5;
  --shadow-dark: #2a2a2a;

  /* Tactile Shadow Scale (3D Offset) */
  --shadow-2xs: 0 2px 0 #0000000d;
  --shadow-xs: 0 2px 0 var(--border-default);
  --shadow-sm: 0 4px 0 var(--border-default);
  --shadow-md: 0 4px 0 var(--border-default), 0 6px 12px -4px rgba(0,0,0,0.06);
  --shadow-lg: 0 6px 0 var(--border-default), 0 10px 20px -6px rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 0 var(--border-default), 0 16px 32px -8px rgba(0,0,0,0.1);
  --shadow-2xl: 0 12px 24px -8px rgba(0,0,0,0.18);
}

/* Dark Mode Theme — DISABLED (kids app: light-only) */
/* @media (prefers-color-scheme: dark) { :root { } } */

/* Typography Foundations */
.lingo-typography h1, 
.lingo-typography h2, 
.lingo-typography h3, 
.lingo-typography h4, 
.lingo-typography h5, 
.lingo-typography h6 {
  font-family: var(--font-nunito);
  color: var(--heading);
  font-weight: 800;
  margin: 0;
}

.lingo-typography h1 {
  letter-spacing: -.4px;
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.1;
}

.lingo-typography h2 {
  letter-spacing: -.3px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.15;
}

.lingo-typography h3 {
  letter-spacing: -.2px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .lingo-typography h1 { font-size: 36px; }
  .lingo-typography h2 { font-size: 32px; }
  .lingo-typography h3 { font-size: 26px; }
}

@media (min-width: 1024px) {
  .lingo-typography h1 { font-size: 48px; }
  .lingo-typography h2 { font-size: 36px; }
  .lingo-typography h3 { font-size: 28px; }
}

/* Component Classes */

/* 1. Buttons (.btn) */
.btn {
  text-transform: uppercase;
  letter-spacing: .8px;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nunito);
  font-weight: 800;
  text-decoration: none;
  transition: background-color .1s ease-out, transform .1s ease-out, box-shadow .1s ease-out, color .1s ease-out, border-color .1s ease-out;
  display: inline-flex;
}

.btn:focus-visible {
  outline: none;
}

/* Sizing Variants */
.btn-xs { padding: 8px 14px; font-size: 12px; }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-md { padding: 14px 20px; font-size: 15px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-xl { padding: 18px 32px; font-size: 17px; }

/* Color Variants with Tactile active states */
.btn-brand {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 0 var(--shadow-brand);
}
.btn-brand:hover {
  background: var(--brand-medium);
}
.btn-brand:active {
  box-shadow: 0 2px 0 var(--shadow-brand);
  transform: translateY(2px);
}
.btn-brand:focus-visible {
  box-shadow: 0 4px 0 var(--shadow-brand), 0 0 0 4px var(--brand-soft);
}

.btn-secondary {
  background: var(--neutral-primary-soft);
  color: var(--body);
  border-color: var(--border-default);
  box-shadow: 0 4px 0 var(--shadow-secondary);
}
.btn-secondary:hover {
  background: var(--neutral-secondary-medium);
  color: var(--heading);
}
.btn-secondary:active {
  box-shadow: 0 2px 0 var(--shadow-secondary);
  transform: translateY(2px);
}

.btn-tertiary {
  background: var(--neutral-primary-soft);
  color: var(--fg-brand);
  border-color: var(--border-default);
  box-shadow: 0 4px 0 var(--shadow-secondary);
}
.btn-tertiary:hover {
  background: var(--brand-softer);
}
.btn-tertiary:active {
  box-shadow: 0 2px 0 var(--shadow-secondary);
  transform: translateY(2px);
}

.btn-warning {
  background: var(--warning);
  color: var(--shadow-dark);
  box-shadow: 0 4px 0 var(--shadow-warning);
}
.btn-warning:hover {
  background: var(--warning-medium);
}
.btn-warning:active {
  box-shadow: 0 2px 0 var(--shadow-warning);
  transform: translateY(2px);
}

.btn-dark {
  background: var(--shadow-dark);
  color: #fff;
  box-shadow: 0 4px 0 var(--neutral-primary-strong);
}
.btn-dark:hover {
  background: var(--heading);
}
.btn-dark:active {
  box-shadow: 0 2px 0 var(--neutral-primary-strong);
  transform: translateY(2px);
}

.btn-ghost {
  color: var(--heading);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--neutral-secondary-medium);
}


/* 2. Cards (.card) */
.card {
  background: var(--neutral-primary-soft);
  border: 2px solid var(--border-default);
  box-shadow: var(--shadow-xs);
  border-radius: 12px;
}

.card-interactive {
  cursor: pointer;
  transition: background-color .1s ease-out, border-color .1s ease-out, transform .1s ease-out, box-shadow .1s ease-out;
}

.card-interactive:hover {
  background: var(--brand-softer);
  border-color: var(--border-brand-subtle);
}

.card-interactive:active {
  transform: translateY(2px);
  box-shadow: 0 0 transparent;
}


/* 3. Badges, Pills & Tags */
.pill {
  border: 2px solid var(--border-default);
  background: var(--neutral-primary-soft);
  color: var(--heading);
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.tag-brand {
  border: 2px solid var(--border-brand-subtle);
  background: var(--brand-softer);
  color: var(--fg-brand-strong);
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}


/* Animations & Micro-interactions */

.marquee-track {
  width: max-content;
  animation: 40s linear infinite lingo-marquee;
  display: flex;
}

@keyframes lingo-marquee {
  0% { transform: translate(0); }
  100% { transform: translate(-50%); }
}

.wiggle {
  transform-origin: 50%;
  animation: 3.5s ease-in-out infinite lingo-wiggle;
}

@keyframes lingo-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.float {
  animation: 4s ease-in-out infinite lingo-float;
}

@keyframes lingo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.pop {
  animation: .6s ease-out both lingo-pop;
}

@keyframes lingo-pop {
  0% { transform: scale(.95); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}