@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:wght@600;700&display=swap");

/*
 * KSL unified interface layer
 * Typography: KSL Library / Academic Repository scale
 * Palette: KSL Website / CMS
 */
:root {
  --ksl-navy: #071f3d;
  --ksl-navy-2: #0c315d;
  --ksl-navy-700: #0c315d;
  --ksl-navy-soft: #eef3f8;
  --ksl-maroon: #b51f2e;
  --ksl-maroon-dark: #921724;
  --ksl-red: #b51f2e;
  --ksl-red-dark: #921724;
  --ksl-red-soft: #fbeced;
  --ksl-gold: #c9a44b;
  --ksl-gold-soft: #f8f2e3;
  --ksl-ink: #10233b;
  --ksl-muted: #5d6875;
  --ksl-paper: #f7f4ed;
  --ksl-bg: #f7f4ed;
  --ksl-card: #ffffff;
  --ksl-line: #d9d5cb;
  --ksl-font-ui: "Inter", "Segoe UI", Arial, sans-serif;
  --ksl-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ksl-radius: 8px;

  /* Existing Website / CMS / Academic Repository token aliases. */
  --navy: var(--ksl-navy);
  --navy-2: var(--ksl-navy-2);
  --red: var(--ksl-red);
  --red-dark: var(--ksl-red-dark);
  --gold: var(--ksl-gold);
  --ink: var(--ksl-ink);
  --muted: var(--ksl-muted);
  --paper: var(--ksl-paper);
  --line: var(--ksl-line);
  --font-ui: var(--ksl-font-ui);
  --font-display: var(--ksl-font-display);
  --cms-navy: var(--ksl-navy);
  --cms-navy-2: var(--ksl-navy-2);
  --cms-red: var(--ksl-red);
  --cms-gold: var(--ksl-gold);
  --cms-ink: var(--ksl-ink);
  --cms-muted: var(--ksl-muted);
  --cms-bg: var(--ksl-paper);
  --cms-line: var(--ksl-line);
  --cms-sans: var(--ksl-font-ui);
  --tp-navy: var(--ksl-navy);
  --tp-navy-2: var(--ksl-navy-2);
  --tp-red: var(--ksl-red);
  --tp-gold: var(--ksl-gold);
  --tp-bg: var(--ksl-paper);
  --tp-line: var(--ksl-line);
  --tp-muted: var(--ksl-muted);
  --tp-ink: var(--ksl-ink);
}

html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ksl-font-ui) !important;
}

body {
  color: var(--ksl-ink);
  font-size: 13px !important;
  line-height: 1.58;
}

button,
input,
select,
textarea,
.btn,
.button,
.admin-button,
.cms-button {
  font-size: 13px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-name,
.cms-brand-name,
.tp-brand-text strong {
  font-family: var(--ksl-font-display) !important;
  letter-spacing: -0.012em;
}

main h1,
.page-title,
.cms-page-head h1,
.tp-page-head h1 {
  font-size: clamp(28px, 3vw, 34px) !important;
  line-height: 1.12 !important;
}

main h2,
.section-title,
.cms-card h2,
.tp-card h2 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

main h3,
.card h3,
.cms-card h3,
.tp-card h3 {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

p,
li,
td,
th,
label,
.nav-link,
.menu-link {
  font-size: inherit;
}

a {
  color: var(--ksl-red);
}

a:hover,
a:focus-visible {
  color: var(--ksl-red-dark);
}

:focus-visible {
  outline: 3px solid rgba(201, 164, 75, 0.55);
  outline-offset: 2px;
}

/* Shared surfaces and controls. */
.card,
.panel,
.module-card,
.cms-card,
.tp-card,
.portal-card,
.stat-card,
.metric-card {
  border-color: var(--ksl-line) !important;
  border-radius: var(--ksl-radius) !important;
}

input,
select,
textarea,
.form-control,
.form-select {
  border-color: var(--ksl-line) !important;
  color: var(--ksl-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--ksl-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 164, 75, 0.18) !important;
}

.btn-primary,
.button-red,
.admin-primary,
.cms-primary,
.tp-primary,
button[type="submit"] {
  background-color: var(--ksl-red) !important;
  border-color: var(--ksl-red) !important;
  color: #fff !important;
}

.btn-primary:hover,
.button-red:hover,
.admin-primary:hover,
.cms-primary:hover,
.tp-primary:hover,
button[type="submit"]:hover {
  background-color: var(--ksl-red-dark) !important;
  border-color: var(--ksl-red-dark) !important;
}

thead th {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

tbody td {
  font-size: 13px !important;
}

/* KSL Website: retain its editorial hierarchy at the smaller Library scale. */
.hero h1,
.editorial-hero h1 {
  font-size: clamp(36px, 5vw, 50px) !important;
  line-height: 1.02 !important;
}

.hero p,
.hero .hero-copy,
.editorial-hero p {
  font-size: clamp(14px, 1.4vw, 16px) !important;
}

.section h2,
.section-heading-row h2,
.public-reference-page h2 {
  font-size: clamp(24px, 3vw, 32px) !important;
}

.program-main h3,
.lead-story h3,
.news-card h3 {
  font-size: 20px !important;
}

.main-nav a,
.top-nav a,
.site-nav a,
.utility-nav a {
  font-family: var(--ksl-font-ui) !important;
  font-size: 12px !important;
}

/* CMS and Darta/Chalani: one compact administrative scale. */
.cms-body,
.cms-login-body,
.app-shell,
.admin-shell,
.portal-shell {
  font-size: 13px !important;
}

.cms-sidebar,
.tp-sidebar,
.app-sidebar,
.sidebar {
  background-color: var(--ksl-navy) !important;
}

.cms-sidebar a,
.tp-sidebar a,
.app-sidebar a,
.sidebar a {
  font-size: 12px !important;
}

.cms-sidebar a.active,
.tp-sidebar a.active,
.app-sidebar a.active,
.sidebar a.active {
  border-left-color: var(--ksl-gold) !important;
}

.cms-topbar,
.tp-topbar,
.app-topbar,
.topbar {
  border-bottom-color: var(--ksl-line) !important;
}

.cms-workspace,
.cms-main,
.dashboard-command-grid,
.dashboard-command-grid.wide-left,
.dashboard-command-grid > .cms-card,
.dashboard-command-grid.wide-left > .cms-card {
  min-width: 0;
  max-width: 100%;
}

.cms-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.cms-hero-dashboard h1,
.cms-hero-dashboard h2,
.cms-hero-dashboard h3 {
  color: #fff !important;
}

.cms-hero-dashboard .cms-kicker {
  color: var(--ksl-gold) !important;
}

.portal-hero h1,
.portal-hero h2,
.portal-hero h3 {
  color: #fff !important;
}

.tp-hero h1,
.tp-hero h2,
.tp-hero h3 {
  color: #fff !important;
}

.tp-hero .eyebrow,
.tp-hero .tp-kicker {
  color: var(--ksl-gold) !important;
}

.cms-page-head p,
.tp-page-head p,
.page-head p,
.eyebrow,
.kicker,
.meta,
.muted {
  color: var(--ksl-muted) !important;
}

/* Academic Repository and Library use the same restrained reading hierarchy. */
.tp-login-story h1,
.login-story h1,
.library-hero h1,
.repo-hero h1 {
  color: #fff !important;
  font-size: clamp(30px, 4vw, 38px) !important;
}

.tp-topbar strong,
.library-topbar strong,
.admin-topbar strong {
  font-family: var(--ksl-font-display) !important;
  font-size: 16px !important;
}

.tp-main,
.cms-main,
.admin-main,
.content,
.workspace-main {
  color: var(--ksl-ink);
}

.tp-login-card h2,
.login-card h2 {
  font-size: 24px !important;
}

/* Compact handset scale without changing established layouts. */
@media (max-width: 700px) {
  body {
    font-size: 13px !important;
  }

  .hero h1,
  .editorial-hero h1 {
    font-size: 34px !important;
  }

  main h1,
  .page-title,
  .cms-page-head h1,
  .tp-page-head h1 {
    font-size: 28px !important;
  }

  .section h2,
  .section-heading-row h2,
  .public-reference-page h2 {
    font-size: 24px !important;
  }
}