/*
 * STKY shared exercise design system — v2.3
 * Shared typography, buttons, fields, feedback, and CEFR color tokens.
 * Exercise-specific layout and interaction rules remain in each HTML file.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --stky-level: var(--stky-a2);
  --stky-level-panel: #F1F7FD;
  --stky-font: 'Manrope', Arial, sans-serif;
  --stky-ink: #172B4D;
  --stky-border: #B8C5D6;
  --stky-focus: #3563E9;
  --stky-success: #15803D;
  --stky-success-bg: #E8F7ED;
  --stky-error: #B91C1C;
  --stky-error-bg: #FEF2F2;
  --stky-a1: #D8F5E8;
  --stky-a2: #DCEEFF;
  --stky-b1: #FFF0C9;
  --stky-b2: #FFE2DC;
  --stky-c1: #EEE3FA;
  --stky-c2: #DFE8FF;
}
body[data-stky-level="A1"] { --stky-level: var(--stky-a1); --stky-level-border: #B5E8D2; --stky-level-panel: #F1FBF6; }
body[data-stky-level="A2"] { --stky-level: var(--stky-a2); --stky-level-border: #B8D8F5; --stky-level-panel: #F1F7FD; }
body[data-stky-level="B1"] { --stky-level: var(--stky-b1); --stky-level-border: #F4D982; --stky-level-panel: #FFF8E7; }
body[data-stky-level="B2"] { --stky-level: var(--stky-b2); --stky-level-border: #F4C4B9; --stky-level-panel: #FFF5F2; }
body[data-stky-level="C1"] { --stky-level: var(--stky-c1); --stky-level-border: #D8C5EF; --stky-level-panel: #F8F4FD; }
body[data-stky-level="C2"] { --stky-level: var(--stky-c2); --stky-level-border: #C4D2FA; --stky-level-panel: #F4F6FF; }

html, body, body * { font-family: var(--stky-font); }
body { color: var(--stky-ink); font-weight: 400; }
p, label, li, .instruction, .intro, .question, .feedback, .summary, .small, .transcript { line-height: 1.5; }

button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .primary, .secondary {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  font-family: var(--stky-font) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  border: 0 !important;
  outline: none;
  border-radius: 9999px;
  box-shadow: none !important;
  transition: filter .2s ease, transform .2s ease, background-color .2s ease;
  cursor: pointer;
  padding: 8px 28px;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .btn:hover, .primary:hover, .secondary:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, .btn:active, .primary:active, .secondary:active {
  transform: translateY(1px);
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--stky-focus) !important;
  outline-offset: 3px;
}
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; transform: none; }

input[type="text"], input[type="search"], input[type="email"], select, textarea, input.gap, .qrow input, .qrow select {
  box-sizing: border-box;
  font-family: var(--stky-font) !important;
  font-size: 16px;
  line-height: 1.35;
  max-width: 100%;
}
input[type="text"], input[type="search"], input[type="email"], select, textarea, .qrow input, .qrow select { border-radius: 8px; }

.primary, .btn.primary, .actions .primary {
  background: var(--stky-level) !important;
  color: var(--stky-ink) !important;
  border: 0 !important;
}
.secondary, .btn.secondary, .actions .secondary {
  background: var(--stky-level-panel) !important;
  color: var(--stky-ink) !important;
  border: 0 !important;
}
.instruction, .intro, .summary, .transcript, .results, .wordbank, .audio-wrap {
  background-color: var(--stky-level-panel);
}
.option:has(input:checked), .adjective-bank button.selected {
  background: var(--stky-level) !important;
}
.correct { color: var(--stky-success); }
.incorrect { color: var(--stky-error); }

@media (max-width: 560px) {
  button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .primary, .secondary {
    padding: 8px 18px;
    font-size: 16px;
  }
}


/* Shared form-control colors */
input[type="text"], input[type="search"], input[type="email"], input[type="number"],
input[type="url"], input[type="password"], input[type="range"], select, textarea,
input.gap, .qrow input, .qrow select {
  color: var(--stky-ink) !important;
  background-color: #FFFFFF !important;
  border: 1px solid var(--stky-border) !important;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="url"]:focus, input[type="password"]:focus,
select:focus, textarea:focus, input.gap:focus, .qrow input:focus, .qrow select:focus {
  border-color: var(--stky-focus) !important;
}
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--stky-focus);
}

/* Consistent action-button palette, including exercises with custom button class names */
body button.primary, body input[type="submit"], body .btn.primary, body button.check {
  background: var(--stky-level) !important;
  color: var(--stky-ink) !important;
  border: 0 !important;
}
body button.secondary, body .btn.secondary, body button.reset,
body button:not(.primary):not(.check):not([type="submit"]),
body input[type="button"], body input[type="reset"] {
  background: var(--stky-level-panel) !important;
  color: var(--stky-ink) !important;
  border: 0 !important;
}