/* ============================================================
   REVFAKTOR THEME — drop-in reskin for the Portal
   ------------------------------------------------------------
   Portal adaptation of the Revfaktor Design System handoff
   (handoff/revfaktor-theme.css targets the Parts dashboard's
   token names; this file maps the same brand values onto the
   Portal's tokens: --paper/--ink/--line/--accent-bright/...).

   Loads AFTER each page's inline <style> block so these :root
   values win. To revert: delete the <link> line. Nothing else
   changes.
   ============================================================ */

/* --- Brand webfonts (Google CDN) ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* --- Token remap -------------------------------------------- */
:root {
  /* Light surfaces & ink: warm paper -> cool navy-tinted neutrals */
  --paper:        #F4F6F8;
  --card:         #FFFFFF;
  --ink:          #0A2233;
  --muted:        #5A6B7A;
  --line:         #D9E0E6;

  /* THE change: copper -> molten Revfaktor orange */
  --accent:        #F0602F;
  --accent-bright: #F47B50;   /* lifted step of the ramp, for dark panels */
  --accent-deep:   #DB4F20;   /* hover / pressed */
  --accent-tint:   #FDE7DE;   /* badge & wash backgrounds */

  /* Type: IBM Plex Sans body, Archivo display */
  --sans: 'IBM Plex Sans', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- Typography --------------------------------------------- */
/* Headings, brand wordmark and buttons carry Archivo; body copy,
   tables and inputs stay IBM Plex Sans via --sans above. */
h1, h2, h3,
.section-header,
header .brand,
.login-card .brand,
.tile h3,
.empty h2,
button, .btn {
  font-family: 'Archivo', 'Avenir Next', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
/* Numeric cells get tabular figures so columns align */
td { font-variant-numeric: tabular-nums; }
/* Uppercase table labels get the brand's engineered spacing
   (th is already mono/uppercase in base.html) */
th { letter-spacing: .08em; }

/* --- Cool-neutral sweep (hard-coded warm tones in base.html) - */
th { background: #F7F9FA; }
td { border-bottom-color: #E8EDF1; }
input[type=text], input[type=email], input[type=number],
input[type=url], select, .role-select { border-color: #C9D3DB; }

/* --- Status colors tuned to the brand ramp ------------------- */
.flash.good { background: #E7F4EE; color: #11614A; border-color: #C4E4D4; }
.flash.bad  { background: #FBE9E7; color: #A32017; border-color: #F2CFCA; }

/* --- Small brand polish (things not driven by variables) ----- */
/* Dashboard tiles: hover glow was hard-coded copper */
.tile:hover { box-shadow: 0 6px 18px rgba(240, 96, 47, .14); }
.tile .key  { color: #6B7A88; }
/* Admin badges: warm grey -> cool grey (admin badge reads the
   accent tint automatically) */
.badge { background: #E8EDF1; }
.badge.admin { background: var(--accent-tint); color: var(--accent-deep); }