/* Ankh-Morpork theme for the self-service password portal.
 *
 * Colours are copied from theming/brand/palette.md, which is the authority. They are NOT
 * eyedroppered from the design-system PNG: palette.md says sampling it returns values
 * 10-15% dark and warns against exactly that.
 *
 * The palette's table assumes a DARK interface, and states plainly that Ankh Brass as a
 * link colour "is correct on #1A1A18 and FAILS on white" at about 2.9:1. SSP ships a light
 * Bootstrap UI, so rather than paint brass onto white and produce something that matches
 * the brand and cannot be read, this restyles the page dark and uses the palette as
 * intended.
 *
 * Self-contained on purpose: no external font or stylesheet requests. Cinzel is served
 * from the container, so the portal renders identically with no internet egress, which
 * matters for a login page.
 */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --patrician-black: #1A1A18;
  --ankh-brass:      #B98A33;
  --guild-gold:      #D7B45A;
  --dark-leather:    #463628;
  --parchment:       #F3E8C9;
  --library-green:   #3C6048;
  --assassin-red:    #7A2E2E;
  --copper:          #A6632D;
}

body {
  background-color: var(--patrician-black) !important;
  color: var(--parchment) !important;
  font-family: Inter, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body::before {                      /* darken the hero so text stays legible over it */
  content: "";
  position: fixed; inset: 0;
  background: linear-gradient(rgba(26,26,24,.86), rgba(26,26,24,.94));
  pointer-events: none; z-index: -1;
}

.navbar, .navbar.bg-body-tertiary {
  background-color: var(--dark-leather) !important;
  border-bottom: 1px solid var(--ankh-brass);
  box-shadow: none !important;
}
.navbar-brand, .navbar .nav-link { color: var(--parchment) !important; }
.navbar .nav-link:hover          { color: var(--guild-gold) !important; }
.navbar-brand {
  font-family: Cinzel, "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
}
.menu-logo { height: 2rem; width: auto; }

.panel, .card, .well, .container > .row > div {
  background-color: rgba(70,54,40,.55);
  border: 1px solid rgba(185,138,51,.35);
  border-radius: .4rem;
}

h1, h2, h3, legend {
  font-family: Cinzel, "Cormorant Garamond", Georgia, serif;
  color: var(--ankh-brass);
  letter-spacing: .03em;
}

a         { color: var(--guild-gold); }
a:hover   { color: var(--ankh-brass); }

label { color: var(--parchment); }
.form-control, input[type="text"], input[type="password"], input[type="email"] {
  background-color: rgba(26,26,24,.75);
  border: 1px solid rgba(185,138,51,.45);
  color: var(--parchment);
}
.form-control:focus {
  background-color: rgba(26,26,24,.9);
  border-color: var(--ankh-brass);
  color: var(--parchment);
  box-shadow: 0 0 0 .2rem rgba(185,138,51,.25);
}
/* A prefilled, SSO-derived username should look settled, not like an empty field
   waiting for input. */
.form-control[readonly], input[readonly] {
  background-color: rgba(70,54,40,.75);
  color: var(--guild-gold);
  cursor: default;
}
::placeholder { color: rgba(243,232,201,.45); }

.btn-primary, .btn-success {
  background-color: var(--ankh-brass);
  border-color: var(--ankh-brass);
  color: var(--patrician-black);
  font-weight: 600;
}
.btn-primary:hover, .btn-success:hover {
  background-color: var(--guild-gold);
  border-color: var(--guild-gold);
  color: var(--patrician-black);
}
.btn-outline-secondary {
  color: var(--parchment);
  border-color: rgba(243,232,201,.4);
}
.btn-outline-secondary:hover {
  background-color: var(--dark-leather);
  color: var(--guild-gold);
  border-color: var(--guild-gold);
}

/* Semantic states, straight from the palette. */
.alert-success, .text-success { background-color: rgba(60,96,72,.25);  border-color: var(--library-green); color: #A9CDB4; }
.alert-danger,  .text-danger  { background-color: rgba(122,46,46,.25); border-color: var(--assassin-red);  color: #E4A5A5; }
.alert-warning, .text-warning { background-color: rgba(166,99,45,.25); border-color: var(--copper);        color: #EFC49A; }
.alert-info,    .text-info    { background-color: rgba(47,85,119,.25); border-color: #2F5577;              color: #A8C4DC; }

/* The password-policy checklist is the one place users actually read closely. */
#policy li, .policy li { color: rgba(243,232,201,.8); }

#footer {
  color: rgba(243,232,201,.5);
  border-top: 1px solid rgba(185,138,51,.25);
  padding-top: .75rem;
  font-size: .85rem;
}
#sspr-signout { margin-top: 1rem; }