/* ============================================================
   SOP Library — Ink & Ember brand overlay (25 Jul 2026)
   PJ: "SOP Dashboard is still not the same as the rest."
   The /sops SPA is Tailwind; rather than reskinning 4,000
   lines of JSX, this loads AFTER the app bundle and restyles
   it to the 2026 brand deck: paper background, 0px radius,
   1px Off-Black borders, hard offset shadows, Nohemi display
   type, Delight body. Colours inside the app (#1F1F1F ink,
   #F72630 Rebel Red) already match the brand — untouched.
   ============================================================ */

@font-face {
  font-family: 'Nohemi';
  src: url('/assets/fonts/nohemi-bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Nohemi';
  src: url('/assets/fonts/nohemi-medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('/assets/fonts/delight-regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('/assets/fonts/delight-bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* --- Canvas: Sage-cream paper instead of SaaS grey --- */
body, .bg-gray-50 { background-color: #FBF8F1 !important; }
.bg-gray-100 { background-color: #F5EFE3 !important; }

/* --- Type: Delight body, Nohemi display --- */
body {
  font-family: 'Delight', -apple-system, sans-serif !important;
  color: #1F1F1F;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .text-3xl, .text-2xl {
  font-family: 'Nohemi', sans-serif !important;
  letter-spacing: -0.01em;
}

/* Buttons speak Nohemi, ALL CAPS (deck p35) — but ONLY plain action
   buttons. List rows and cards are also <button>s in this app (they
   contain divs/headings), and those must keep normal body casing. */
button:not(:has(div, h1, h2, h3, h4, p)) {
  font-family: 'Nohemi', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --- Squared UI: 0px radius everywhere (deck-corrected rule).
       Avatars and status pills keep their shape (.rounded-full). --- */
.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl {
  border-radius: 0 !important;
}

/* --- Cards: 1px Off-Black border + hard offset shadow, no blur --- */
.bg-white.rounded-2xl, .bg-white.rounded-xl,
.rounded-2xl.border, .rounded-xl.border {
  border: 1px solid #1F1F1F !important;
}
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: 6px 6px 0 #1F1F1F !important;
}

/* Sidebar: white panel with an ink edge */
.border-gray-200 { border-color: #1F1F1F !important; }
.border-gray-100 { border-color: #e3dccb !important; } /* soft internal dividers stay soft */

/* --- Inputs: squared, ink borders, Rebel Red focus --- */
input, select, textarea { border-radius: 0 !important; }
input:focus, select:focus, textarea:focus {
  border-color: #1F1F1F !important;
  box-shadow: 0 0 0 2px rgba(247, 38, 48, .35) !important;
  outline: none;
}

/* --- Interaction polish to match the portal layer --- */
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #F72630; outline-offset: 2px;
}
::selection { background: #F72630; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}