/* Syfred brand override for Psono web client. Source: BRAND.md v1.1
   Rule: "Let the dark do the work." Background black, text white, amber
   reserved for exactly one focal element per view — never for prose or links. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --syfred-obsidian: #0A0A0B;
  --syfred-black: #000000;
  --syfred-carbon: #141416;
  --syfred-carbon-2: #1B1B1F;
  --syfred-snow: #FFFFFF;
  --syfred-ash: #94949B;
  --syfred-ash-deep: #5C5C63;
  --syfred-ember: #F2A63B;
  --syfred-ember-hi: #FFC978;
  --syfred-ember-deep: #C67F25;
}

html, body {
  background-color: var(--syfred-obsidian) !important;
  color: var(--syfred-snow) !important;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif !important;
}

* {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

code, pre, .datastore-password, input[type="password"] {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Default text color everywhere: white. This is the fix for text that was
   rendering in MUI's default dark-on-light color and disappearing against
   our black background. */
body, body * {
  color: var(--syfred-snow) !important;
}
.text-muted, .help-block, small, .breadcrumb,
[class*="MuiTypography-colorTextSecondary"],
[class*="secondary"] {
  color: var(--syfred-ash) !important;
}

/* Surfaces: sidebar, panels, cards, modals, dropdowns, tables, login box */
.navbar, .sidebar, .panel, .card, .modal-content, .dropdown-menu,
.list-group-item, .well, .datastore-tree, .table, .popover,
[class*="MuiPaper-root"] {
  background-color: var(--syfred-carbon) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--syfred-snow) !important;
}

.panel-heading, .modal-header, .modal-footer, .table thead th {
  background-color: var(--syfred-carbon-2) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Links: white by default, never amber. Amber prose is a brand violation —
   "Never prose", accent is a focal point only. */
a, a:visited {
  color: var(--syfred-snow) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
a:hover {
  color: var(--syfred-snow) !important;
  text-decoration-color: var(--syfred-snow);
}

/* Icons: white/ash by default, not amber. */
.fa, [class*="MuiSvgIcon-root"] {
  color: var(--syfred-snow) !important;
}
.text-muted .fa, .help-block .fa {
  color: var(--syfred-ash) !important;
}

/* The one lit thing per view: primary call-to-action only. */
.btn-primary, .btn-success,
[class*="MuiButton-containedPrimary"] {
  background-color: var(--syfred-ember) !important;
  border-color: var(--syfred-ember) !important;
  color: var(--syfred-obsidian) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover,
[class*="MuiButton-containedPrimary"]:hover {
  background-color: var(--syfred-ember-hi) !important;
  border-color: var(--syfred-ember-hi) !important;
  color: var(--syfred-obsidian) !important;
}
.btn-primary:active, .btn-primary.active {
  background-color: var(--syfred-ember-deep) !important;
  border-color: var(--syfred-ember-deep) !important;
}

.btn-default, .btn-secondary {
  background-color: var(--syfred-carbon-2) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--syfred-snow) !important;
}

/* Forms */
.form-control, input, select, textarea {
  background-color: var(--syfred-carbon-2) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--syfred-snow) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--syfred-ember) !important;
  box-shadow: 0 0 0 2px rgba(242, 166, 59, 0.35) !important;
}
::placeholder { color: var(--syfred-ash) !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--syfred-obsidian); }
::-webkit-scrollbar-thumb { background: var(--syfred-carbon-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--syfred-ash-deep); }

/* Login screen container: solid carbon card on obsidian page, not the
   default navy MUI "blueBackground". */
.login-box, .auth-box, #login {
  background-color: var(--syfred-carbon) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Logo sizing to match the wordmark aspect ratio */
.navbar-brand img, .login-logo img, .logo img {
  height: 32px;
  width: auto;
}