/* ═══════════════════════════════════════════════════════════════
   FRONTLINEWORLD — DESIGN TOKENS
   ───────────────────────────────────────────────────────────────
   Every value the system is allowed to vary lives here. Nothing
   in forum.css hard-codes a colour, a face, or a step on the
   spacing scale — if you find one, it's a bug in the system,
   not a shortcut.

   This is also the porting seam. XenForo style properties,
   NodeBB theme variables and Flarum's Less variables all map
   onto this file one-to-one. Restyling the platform means
   translating this file, not rewriting components.
   ═══════════════════════════════════════════════════════════════ */

:root{

  /* ── COLOUR ───────────────────────────────────────────────────
     Red is a signal, not a surface. It marks state (unread, new,
     yours), one primary action per view, and nothing else. It is
     never body copy: saturated red on near-black lands around
     5:1 and fatigues at reading sizes.

     Four greys carry the whole structure. If a new surface seems
     necessary, the answer is almost always more space instead.  */

  --ink:      #0B0B0C;   /* page                                  */
  --panel:    #101013;   /* raised block: cards, rails, bars       */
  --panel-2:  #17171B;   /* hover, inset, code                     */
  --line:     #24242A;   /* every hairline in the system           */
  --line-hot: #3A1C1B;   /* hairline on something signalling       */

  /* Measured against the LIGHTEST surface a colour can land on
     (--panel-2), not against --ink, because that is the worst case
     and it is where hover states put things.

                       ink    panel  panel-2
       --bone        15.38   14.85    13.97
       --ash          6.11    5.90     5.55
       --dim          5.00    4.82     4.54   ← was 2.96, a failure
       --signal       5.54    5.35     5.04

     WCAG 2.2 AA wants 4.5:1 for text below roughly 24px, which is
     everything here. --dim used to be #5E5C5A: it carried nearly
     every timestamp, count and label on the site at 2.96:1, which
     passes nothing at any size. That was the "hard to read". */
  --bone:     #E6E3DF;   /* body copy                              */
  --ash:      #928F8A;   /* secondary prose, names                 */
  --dim:      #82807D;   /* metadata, mono labels                  */

  /* Genuinely decorative marks only — the plate glyph, hazard
     stripes, rule accents. Never text a person has to read. */
  --faint:    #5E5C5A;

  --signal:   #FF3B2F;   /* state + one primary action             */
  --signal-lift: #FF574C;/* signal, hovered                        */
  --blood:    #6E0F0A;   /* signal at rest: rules, marks, hazard   */

  /* tints. Kept as tokens so avatar and state washes stay in
     step with the palette instead of drifting into new colours. */
  --wash-signal: rgba(255, 59, 47, .08);
  --wash-bone:   rgba(230, 227, 223, .08);
  --wash-blood:  rgba(110, 15, 10, .28);
  --wash-ash:    rgba(143, 140, 136, .12);
  --wash-flat:   rgba(255, 255, 255, .04);

  /* ── TYPE ─────────────────────────────────────────────────────
     Two faces, two jobs, no overlap. Archivo (variable width)
     carries voice — titles, prose, names. Plex Mono carries
     data — timestamps, counts, labels, state.

     The rule that keeps it honest: if a human wrote it, it's
     Archivo. If a machine counted it, it's mono.                 */

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* body sizes */
  --t-body:  1rem;
  --t-post:  .9375rem;   /* post copy sits one step under UI body  */
  --t-small: .875rem;
  --t-micro: .8125rem;

  /* Mono label sizes. Each moved up one step: 10px uppercase with
     .2em tracking is legible on a designer's monitor and not much
     else. 11px is the floor now, and only for single words.       */
  --t-label: .8125rem;   /* nav, buttons          was .75          */
  --t-meta:  .75rem;     /* timestamps, counts    was .6875        */
  --t-tiny:  .6875rem;   /* pills, chips          was .625         */

  --lh-tight: 1.08;
  --lh-ui:    1.6;
  --lh-read:  1.68;      /* post bodies get more leading on dark  */

  /* Tracking eases off as size drops. Wide tracking on small
     uppercase separates letters faster than it separates words,
     and the word shape is what people actually read.              */
  --tr-label: .12em;     /* mono, general          was .14         */
  --tr-caps:  .16em;     /* mono, section headers  was .2          */
  --lh-label: 1.5;       /* mono rows were running at body leading */
  --ls-body:  .006em;    /* type reads tight on dark               */

  --wt-body: 420;        /* nudged up: dark backgrounds thin type  */
  --wt-med:  600;
  --wt-bold: 700;
  --wt-black: 800;

  /* ── SPACE ────────────────────────────────────────────────────
     One scale. Component padding picks a step; it does not
     invent a value between two steps.                            */

  --s1: .5rem;
  --s2: .875rem;
  --s3: 1.5rem;          /* the workhorse: most block padding      */
  --s4: 2.5rem;
  --s5: clamp(3rem, 5vw, 4.5rem);
  --s6: clamp(4.5rem, 9vw, 8rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1500px;

  /* ── STRUCTURE ────────────────────────────────────────────────
     Radius is 2px everywhere, which reads as a cut edge rather
     than a rounded card. There are no shadows in this system:
     depth comes from hairlines and space.                        */

  --radius: 2px;
  --hair: 1px;
  --rule: 2px;           /* an accent rule, not a hairline         */

  --bar: 56px;           /* masthead height                        */
  --subbar: 48px;        /* community nav height                   */
  --rail: 232px;         /* post author rail                       */
  --aside: 340px;        /* index sidebar                          */
  --avatar: 34px;
  --avatar-sm: 28px;
  --avatar-lg: 88px;

  --read: 74ch;          /* post body measure                      */

  /* ── MOTION ───────────────────────────────────────────────────
     One easing curve. Two durations: a hover and a reveal.
     Anything slower than .6s in a forum is in the way.           */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-hover: .18s;
  --t-move: .28s;
  --t-reveal: .5s;
}