/* Kildera theme.
 *
 * Loaded after docent-design-system.css and does nothing but redefine its
 * tokens, so all 27 pages that use the system pick up the brand without any
 * of them being edited. Where a value here has no counterpart in the system,
 * it is a deliberate departure rather than an omission - noted inline.
 *
 * The identity: an off-white ground, structural ink, and crimson used as a
 * signal rather than decoration. Corners are near-square and shadows are
 * absent, because the design reads as engineering documentation rather than
 * as a consumer product - which is the register a public-sector buyer trusts.
 */
@import url('/static/fonts/fonts.css');

:root {
  /* Crimson. One signal colour, used for the primary action and for state. */
  --brand:           #C8102E;   /* Dannebrog red; 5.9:1 with white (WCAG AA) */
  --brand-hover:     #A50D26;
  --brand-subtle:    #FCEDED;
  --brand-muted:     rgba(200, 16, 46, 0.12);

  /* Ground and surfaces: off-white, never pure white behind content. */
  --bg:              #F1F1F1;
  --surface:         #FFFFFF;
  --surface-2:       #F6F6F6;
  --surface-hover:   #F1F1F1;

  /* The lattice. Hairlines carry the structure that shadows would elsewhere. */
  --border:          rgba(17, 17, 17, 0.12);
  --border-strong:   rgba(17, 17, 17, 0.24);

  --text:            #111111;
  --text-muted:      rgba(17, 17, 17, 0.78);
  --text-subtle:     rgba(17, 17, 17, 0.66);   /* 5.5:1 on #F1F1F1 */

  /* Sidebar in ink rather than zinc, so it reads as the same black as body
     text rather than as a separate grey. */
  --sb-bg:           #111111;
  --sb-border:       #262626;
  --sb-text:         rgba(255, 255, 255, 0.58);
  --sb-text-active:  #FFFFFF;
  --sb-hover:        rgba(255, 255, 255, 0.06);
  --sb-active:       rgba(200, 16, 46, 0.22);
  --sb-label:        rgba(255, 255, 255, 0.6);

  /* Semantic colours stay distinct from the brand: crimson already means
     "this is the action", so it cannot also mean "this went wrong". */
  --success:         #1B7F4B;
  --success-bg:      #EFF7F1;
  --success-border:  #BFE0CC;
  --warning:         #9C5C17;
  --warning-bg:      #FBF3E8;
  --warning-border:  #E8D2AE;
  --danger:          #8C2F22;
  --danger-bg:       #F8EEEC;
  --danger-border:   #E3C4BE;

  /* Near-square. The system's 12-16px radii read as consumer software. */
  --r-sm:            2px;
  --r-md:            2px;
  --r-lg:            3px;
  --r-xl:            4px;
  --r-full:          9999px;
}

/* Typography. Space Grotesk carries headings; Inter carries everything read
   at length. The system sets Outfit on body, so it is overridden at the same
   specificity rather than with !important. */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Shadows are replaced by hairlines throughout - the two together read as
   indecision, and the border is what makes the structure legible on an
   off-white ground. */
.card, .panel, .modal, .dropdown, .stat-card {
  box-shadow: none;
  border: 1px solid var(--border);
}

/* The primary action is the one crimson element on a screen. */
.btn-primary, button[type="submit"] {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, button[type="submit"]:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}