/*
 * AOS UI foundation
 * -----------------
 * One visual vocabulary shared by Admin, Hub, learner LMS and the LMS builder.
 * Surface styles may compose these tokens, but should not redefine the core
 * brand, text, border, radius, shadow or interaction values independently.
 */
:root {
  /* Color */
  --ui-brand: #489bad;
  --ui-brand-hover: #2f7f90;
  --ui-brand-deep: #205f6c;
  --ui-brand-soft: #eaf6f8;
  --ui-accent: #f67443;
  --ui-ink: #172024;
  --ui-heading: #111111;
  --ui-text: #3e4a4f;
  --ui-muted: #61747a;
  --ui-border: #dbe6e8;
  --ui-border-strong: #c7dade;
  --ui-brand-border: #b8dde4;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f5f9fa;
  --ui-surface-hover: #f9fcfc;
  --ui-success: #2f7a5a;
  --ui-success-soft: #eaf7f2;
  --ui-danger: #b03a4b;
  --ui-danger-border: #edc4ca;
  --ui-danger-soft: #faecee;

  /* Type */
  --ui-font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-leading-body: 1.55;
  --ui-leading-heading: 1.15;

  /* Space */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 32px;
  --ui-space-8: 40px;
  --ui-space-9: 48px;

  /* Shape */
  --ui-radius-xs: 4px;
  --ui-radius-sm: 6px;
  --ui-radius-control: 9px;
  --ui-radius-card: 14px;
  --ui-radius-panel: 16px;
  --ui-radius-modal: 20px;
  --ui-radius-pill: 999px;

  /* Elevation */
  --ui-shadow-card: 0 10px 26px rgba(24,55,63,.075), 0 3px 9px rgba(24,55,63,.032);
  --ui-shadow-card-hover: 0 16px 34px rgba(24,55,63,.11), 0 5px 13px rgba(24,55,63,.04);
  --ui-shadow-float: 0 18px 44px rgba(20,57,65,.16);
  --ui-shadow-modal: 0 34px 90px rgba(16,39,47,.24), 0 8px 24px rgba(16,39,47,.10);

  /* Interaction */
  --ui-ease: cubic-bezier(.2,.8,.2,1);
  --ui-motion-press: 120ms;
  --ui-motion-state: 160ms;
  --ui-motion-panel: 220ms;
  --ui-focus: 0 0 0 3px rgba(72,155,173,.22);
  --ui-control-height: 42px;
  --ui-control-height-compact: 36px;
  --ui-card-padding: 24px;
  --ui-panel-padding: 18px;
}

/* Shared primitives intentionally stay small. Surface-specific layout belongs
   in the surface stylesheet; these are the pieces that should mean the same
   thing everywhere. */
.aos-ui-page-intro {
  max-width: 820px;
  margin: 0 0 var(--ui-space-6);
  display: grid;
  gap: var(--ui-space-2);
}
.aos-ui-page-intro h2 {
  margin: 0;
  color: var(--ui-heading);
  font-family: var(--ui-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}
.aos-ui-page-intro p {
  max-width: 72ch;
  margin: 0;
  color: var(--ui-muted);
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.55;
}

/* Accessible keyboard focus should be recognizable across every surface. */
:where(.hub-main, .lms-learner-body, .lms-next-app, .fi-body)
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus);
}


/* Canonical semantic primitives. These classes are deliberately layout-light:
   product surfaces keep their own structure while sharing the same interaction
   and visual rules. */
.aos-ui-card {
  padding: var(--ui-card-padding);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-ink);
}
.aos-ui-panel {
  padding: var(--ui-panel-padding);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  color: var(--ui-ink);
}
.aos-ui-button {
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-4);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  font: 700 13px/1 var(--ui-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ui-motion-state) var(--ui-ease), border-color var(--ui-motion-state) var(--ui-ease), color var(--ui-motion-state) var(--ui-ease), box-shadow var(--ui-motion-state) var(--ui-ease);
}
.aos-ui-button--primary { background: var(--ui-brand); color: #fff; }
.aos-ui-button--primary:hover { background: var(--ui-brand-hover); }
.aos-ui-button--secondary { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-brand-deep); }
.aos-ui-button--secondary:hover { border-color: var(--ui-brand); background: var(--ui-surface-hover); }
.aos-ui-field {
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  transition: border-color var(--ui-motion-state) var(--ui-ease), box-shadow var(--ui-motion-state) var(--ui-ease);
}
.aos-ui-field:focus,
.aos-ui-field:focus-within { border-color: var(--ui-brand); box-shadow: var(--ui-focus); outline: 0; }
.aos-ui-notice {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid var(--ui-brand-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand-soft);
  color: var(--ui-brand-deep);
}
.aos-ui-empty {
  padding: var(--ui-space-6);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  text-align: center;
}
.aos-ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: 4px 8px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-subtle);
  color: var(--ui-muted);
  font: 700 11px/1.2 var(--ui-font);
}