/* ===========================================================================
   ROGUE FUSION SERVICES - BRAND STYLESHEET
   ===========================================================================

   The tokens and the components built from them. Loaded by the landing page
   (index.html) and by the brand sheet (brand.html).

   WHAT THIS FILE IS NOT

   It is not loaded by the app. www/app.html is deliberately one self-contained
   file with no build step and no stylesheet request - that property is stated
   in netlify.toml and it is worth keeping, because it means a deploy can never
   half-land and leave the app running with the wrong CSS.

   So the app MIRRORS the :root block below in its own inline <style>. That is a
   real duplication and it can drift. It is the smaller of two evils, and the
   rule for keeping it honest is simple:

     CHANGE A COLOUR HERE, CHANGE IT IN app.html's :root IN THE SAME COMMIT.

   brand.html renders both and puts them side by side, so a drift shows up as
   two swatches that do not match rather than as nothing at all.

   =========================================================================== */

:root{
  /* --- ground -------------------------------------------------------------
     Four steps of dark, not one. A single panel colour makes every surface
     the same distance from the reader; these are ordered so that "further
     forward" always means "lighter". Shared with the siblings on purpose -
     the ground is the family, the accent is the product. */
  --bg:#12161a;            /* the workspace itself */
  --bg-panel:#1a2126;      /* a panel sitting on it */
  --bg-panel-2:#212a31;    /* a panel on a panel - table headers, sub-cards */
  --bg-raised:#262f37;     /* modals, menus, anything floating */

  --border:#333e47;
  --border-soft:#293138;

  /* --- ink --------------------------------------------------------------- */
  --text:#e8ebed;
  --text-dim:#8f9aa3;
  --text-faint:#8a939b;

  /* --- accent -------------------------------------------------------------
     Deliberately not ROW QC teal, not Hot Pass amber, not Sparky QC blue.
     These products get shown side by side in the same meeting and they have
     to be told apart from across a table.

     --accent-ink is the link colour: --accent at 14px on the workspace ground
     fails contrast, and a link nobody can read is not a link. Buttons and
     rules use --accent because they are 15px and up or are not text at all. */
  --accent:#b8371f;
  --accent-hot:#d4472b;    /* hover, and the one place a gradient is allowed */
  --accent-ink:#e58a72;    /* accent-coloured text at body size */
  --accent-dim:rgba(184,55,31,.15);

  /* --- status -------------------------------------------------------------
     Three states and no more. A palette with six severities is a palette
     nobody can read at a glance, which defeats the point of colour-coding a
     QA/QC screen.

     --bad IS ORANGE ON PURPOSE. Every sibling's fail colour is a red, but this
     product's accent is a red, and an alarm colour that reads the same as the
     brand colour is how a red row stops meaning anything. It was moved to
     #f2455f so that a failed pressure test does not look like a button. */
  --pass:#4fae7a;
  --warn:#d9a13a;
  --bad:#f2455f;

  /* --- brand furniture ----------------------------------------------------
     These exist for the logo and for print, not for the interface.
     --plate is the logo's field; --steel-dim is the pipe inside the mark, a
     step darker than --steel so the accent leads. Do not reach for them to
     style a button. They are declared here, and in app.html, so the drift
     check can compare every token rather than reporting half of them absent. */
  --plate:#171310;
  --steel:#7c8790;
  --steel-dim:#6b7780;

  /* --- type ---------------------------------------------------------------
     Three faces, each with a job:
       display - headings and the wordmark. Condensed, so a long project name
                 fits a column without shrinking.
       body    - everything a person reads in sentences.
       mono    - anything that is a MEASUREMENT, an id, a station, a heat
                 number or a date. Tabular figures line up in a column;
                 proportional ones do not, and a stationing column that does
                 not line up is unreadable.
     Loaded from Google Fonts by the pages that use this file. */
  --font-display:'Oswald',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  /* --- measure ------------------------------------------------------------
     One rhythm, so a page built from these never has to invent a number. */
  --gap:18px;
  --pad-section:88px;
  --radius:8px;
  --radius-lg:14px;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --max:1120px;
}

/* ===========================================================================
   BASE
   =========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{color:var(--accent-hot);}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0 0 14px;
  letter-spacing:.2px;}
h1{font-size:clamp(34px,5.2vw,58px);}
h2{font-size:clamp(26px,3.4vw,38px);}
h3{font-size:20px;}
p{margin:0 0 15px;}

/* The one italic in the system. Used on a single word in a heading to carry
   the accent - never on a sentence, never on body copy. */
h1 em, h2 em{font-style:normal;color:var(--accent);}

/* ===========================================================================
   LAYOUT
   =========================================================================== */

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:var(--pad-section) 0;border-top:1px solid var(--border-soft);}
.section.tight{padding:56px 0;}

/* The eyebrow. Monospaced, spaced out, with a rule running into it - the
   drafting-sheet device this whole system is built on. */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:16px;}
.eyebrow .rule{height:1px;width:34px;background:var(--accent);flex:none;opacity:.6;}

.lede{font-size:18px;color:var(--text-dim);max-width:62ch;}

.grid{display:grid;gap:var(--gap);}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.grid.c4{grid-template-columns:repeat(4,1fr);}

/* ===========================================================================
   COMPONENTS
   =========================================================================== */

.card{background:var(--bg-panel);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:22px 24px;}
.card h3{margin-bottom:8px;}
.card p:last-child{margin-bottom:0;}
.card .k{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:9px;}

/* Button ink is #fff, not the plate colour. The siblings put their dark plate
   on the button because a teal or an amber is light enough to carry it; this
   accent is not - #171310 on #b8371f is a 3:1 smear. */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-family:var(--font-display);font-size:15px;
  font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:12px 24px;border-radius:var(--radius);cursor:pointer;transition:background .13s;}
.btn:hover{background:var(--accent-hot);border-color:var(--accent-hot);color:#fff;}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn.ghost:hover{background:var(--bg-panel-2);border-color:var(--steel);color:var(--text);}

.pill{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:var(--bg-panel-2);color:var(--text-dim);border:1px solid var(--border-soft);}
.pill.accent{background:var(--accent-dim);color:var(--accent-ink);border-color:transparent;}

/* A number and what it counts. The number is display-weight because it is the
   thing being claimed; the label is mono because it is a unit. */
.stat .num{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--accent-ink);
  line-height:1;}
.stat .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--text-dim);margin-top:7px;}

/* ===========================================================================
   BRAND FURNITURE
   =========================================================================== */

/* The wordmark as live text, for the nav and the app shell. The SVG lockups
   exist for paper and email, where a webfont cannot be fetched; here it can,
   so it is set rather than drawn. */
.wordmark{display:inline-flex;align-items:center;gap:10px;}
.wordmark img{width:30px;height:30px;flex:none;}
.wordmark .word{font-family:var(--font-display);font-size:21px;font-weight:600;
  letter-spacing:1.2px;color:var(--text);text-transform:uppercase;line-height:1.15;}
.wordmark .word em{font-style:normal;color:var(--accent-ink);}

@media (max-width:820px){
  :root{--pad-section:56px;}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr;}
}