/* ============================================================================
   DMR Bridge — design foundation (tokens · type · base · signature)
   Mirrors the DMR website design system (DES-02):
     charcoal #202020 · plumbing blue #1870C0 · heating red #E80808.
   Semantic: blue = connected / links / flow, red = action / alert,
   charcoal = the vans/surface. Signature: the dual-accent rule (blue|red),
   inherited from the logo's own "PLUMBING & HEATING" split.
   Type: Archivo (display, embedded) + Barlow (body). Dark-app surface.
   This file is the single source of truth for future styling — extend the
   tokens here, not in components.
   ============================================================================ */
@import url('/public/font-display.css'); /* Archivo Var — self-contained data-URI */

@font-face { font-family:'Barlow'; src:url('/public/fonts/barlow-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/public/fonts/barlow-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  /* ── primitives ── */
  --ink-50:#f5f6f8; --ink-100:#e9ebee; --ink-200:#d5d9de; --ink-300:#b3b9c1;
  --ink-400:#8b929c; --ink-500:#666d78; --ink-600:#4c525c; --ink-700:#383d44;
  --ink-800:#26292e; --ink-900:#202020; --ink-950:#161616;
  --blue-300:#7fb5e5; --blue-400:#4a94d6; --blue-500:#2a7fc9; --blue-600:#1870c0; --blue-700:#135b9d;
  --red-300:#f59292; --red-400:#ef5050; --red-500:#e82020; --red-600:#e80808; --red-700:#bd0b0b;
  --amber:#f5b301;

  /* ── semantic (dark app) ── */
  --bg:var(--ink-950);
  --panel:#1b1e23; --panel-2:#23272e; --panel-lift:#20242a;
  --line:#2b3039; --line-soft:rgba(255,255,255,.06);
  --text:#eceef1; --muted:#9aa2ad; --muted-2:#6b727c;
  --blue:var(--blue-600); --blue-on-dark:var(--blue-400);
  --red:var(--red-600); --red-on-dark:var(--red-400);
  --link:var(--blue-400);

  /* ── type ── */
  --font-display:'Archivo Var',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* ── space · radius · shadow · motion ── */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-8:3rem;
  --r-card:.75rem; --r-btn:.5rem; --r-pill:20px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 22px 54px rgba(0,0,0,.5);
  --glow-red:0 8px 24px rgba(232,8,8,.30);
  --glow-blue:0 8px 24px rgba(24,112,192,.30);
  --ease:cubic-bezier(.2,.6,.2,1);

  /* ── signature ── */
  --duo:linear-gradient(90deg,var(--blue-600) 0 50%,var(--red-600) 50% 100%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--text); font-family:var(--font-sans);
  font-size:15px; line-height:1.55;
  background:
    radial-gradient(60rem 34rem at 6% -8%, rgba(24,112,192,.16), transparent 60%),
    radial-gradient(52rem 30rem at 104% 108%, rgba(232,8,8,.12), transparent 55%),
    linear-gradient(160deg, var(--ink-950), var(--ink-900) 55%, #1b1d20);
  background-attachment:fixed;
}
/* livery grain, from the website's band-dark */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-.015em; line-height:1.1; color:#fff; margin:0; }
strong{font-weight:600}
a{color:var(--link); text-decoration:none} a:hover{color:var(--blue-300)}
.mono{font-family:var(--font-mono)}
::selection{background:var(--blue-500); color:#fff}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:2px; border-radius:2px}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#2b3039; border-radius:8px; border:2px solid transparent; background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#3a414c}
*::-webkit-scrollbar-track{background:transparent}

/* ── signature primitives ── */
.rule-duo{display:block; width:3.5rem; height:.25rem; border-radius:2px; background:var(--duo)}
.edge-duo{height:3px; background:var(--duo)}
.kicker{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-sans); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.kicker::before{content:''; width:1.6rem; height:.18rem; border-radius:2px; background:var(--duo)}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important } }