/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [134500]  DESIGN TOKENS — the one definition of how the quote screens look.

   Every colour, size and gap on the stage page, the summary and the pop-ups is named here ONCE,
   by the JOB it does (main text, measured figure, total…), not by what it looks like. Dark is the
   default; light and print swap the value behind each job and nothing else. Change a value here
   and every reference page in design/ changes with it — that is the whole point.

   Why this file exists: "one definition, or they drift" is the most common bug in this codebase
   (13 money formatters, two rename paths…). The design canvas had the same disease — #c49e6c was
   typed by hand hundreds of times across 40 boards. A design that repeats itself drifts exactly
   like code that does.

   Names are prefixed --q- ("quote") so they cannot collide with the app's older variables
   (--accent means three different things across app.css, quote-print.css and stage-v2.css).

   Where the values came from: measured off the approved boards on the design canvas (10 Nov),
   not retyped from memory. Sizes are TRUE rendered px — the canvas boards are drawn inside a
   zoomed A4 sheet, so a "10px" in a board's source is not 10px on screen.

   THE APP LOADS THIS FILE (since 135500), first of all its stylesheets. css/stage-v2.css's older
   role names (--v2-ink, --v2-measured…) now POINT at these rather than holding values, and the
   guard fails if a value is typed back in. The rest of the app moves onto --q-* file by file; each
   move lowers that file's ceiling in the guard's ratchet.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ─────────────────────────────────────────────────────────────────────────── */
  --q-page:        #141414;
  /* cards have no border: a diagonal fade from the top-left is the whole edge */
  --q-card:        linear-gradient(to bottom right, rgba(130,140,155,.115) 0%, rgba(130,140,155,.055) 35%,
                                   rgba(130,140,155,.015) 70%, rgba(130,140,155,0) 100%);
  --q-card-bd:     transparent;
  --q-sheet-bd:    rgba(255,255,255,.16);   /* the outline of the A4 sheet the stage sits on */
  --q-row-hi:      rgba(255,255,255,.025);  /* a take-off item's own row (SF1 - Strip Footing) */
  --q-surface:     #1c1d20;                 /* pop-ups: panels and modals */
  --q-surface-bd:  rgba(255,255,255,.10);
  --q-shadow:      0 18px 48px rgba(0,0,0,.55);
  --q-scrim:       rgba(0,0,0,.55);         /* behind a modal */

  /* ── text: the colours carry the hierarchy, not boxes ─────────────────────────────────── */
  --q-text:        #ecedee;   /* names, row labels you read first */
  --q-sub:         #b4b7bb;   /* sub-item rows, secondary values */
  --q-quiet:       #7e8287;   /* units, caps labels, notes */
  --q-faint:       #55595e;   /* hints, dots, "nothing here yet" */
  --q-ghost:       #4e5257;   /* an empty measure (Piers —) — present but not asking for attention */
  --q-row-label:   #6a6e73;   /* summary stage rows: the SLAB / BEAMS label beside a measure — quieter than --q-quiet */
  --q-row-empty:   #3e4247;   /* summary stage rows: an empty measure, almost gone */

  /* ── roles ───────────────────────────────────────────────────────────────────────────── */
  --q-head:        #c49e6c;   /* group headings: FOOTINGS · HOUSE, CONCRETE, LABOUR, the HOUSE eyebrow */
  --q-measured:    #5aa9f0;   /* anything measured off the plan: 53 m, 42 m², 20.4 m³ */
  --q-tag:         #6ea0d6;   /* the BEAMS / SLAB outline tag on a take-off row */
  --q-tag-bd:      rgba(90,169,240,.28);
  --q-total:       #d4fc00;   /* totals, AND the one button that does the thing (Save, Undo) */
  --q-total-fill:  #d4fc00;   /* a lime BUTTON's fill. Same as --q-total in dark; differs in light */
  --q-total-ink:   #141414;   /* text sitting on a lime fill */
  --q-edited:      #d4fc00;   /* the small dot on a value changed by hand */
  --q-labour:      #e8a33d;   /* man-days */
  --q-add:         #e8a33d;   /* the + boxes, compact view, "+ Add another task" */
  --q-add-bd:      rgba(232,163,61,.35);
  --q-add-tint:    rgba(232,163,61,.08);
  --q-ok:          #7fd483;   /* ✓ Matches */
  --q-warn:        #f0b45a;   /* ! Mismatch */
  --q-ok-bd:       rgba(127,212,131,.35);   /* [142000] the ✓ chip's ring when the check matches */
  --q-warn-bd:     rgba(240,180,90,.55);    /* …and the ! chip's, when it does not */
  --q-warn-tint:   rgba(240,180,90,.10);
  --q-tagged:      #ff5fa2;   /* [142000] the plan-tag button once a plan is tagged (it was this pink in the app) */
  --q-tk-band:     rgba(0,0,0,.22);   /* [142000] the summary's take-off table under a stage: an inset band */
  --q-sheet:       transparent;       /* [142000] the A4 sheet itself: the page shows through it, except in light */
  --q-danger:      #f07878;   /* Remove / Delete only */
  --q-on-danger:   #ffffff;   /* [142000] the × on the solid red quick-delete button */
  --q-danger-tint: rgba(240,120,120,.08);  /* the struck-through row while its Undo bar is up */
  --q-danger-bd:   rgba(240,120,120,.40);
  --q-measured-tint: rgba(90,169,240,.15); /* the 94% match badge; the selected stage number */
  --q-hover:       rgba(255,255,255,.05);  /* a row under the pointer in a panel */

  /* ── editing ─────────────────────────────────────────────────────────────────────────── */
  --q-input-bd:    rgba(196,158,108,.55);   /* the faded-orange ring drawn AROUND text being edited */
  --q-input-bg:    rgba(0,0,0,.30);

  /* ── lines ───────────────────────────────────────────────────────────────────────────── */
  --q-rule:        rgba(255,255,255,.07);   /* under a group heading — the only line inside a card */
  --q-rule-strong: rgba(255,255,255,.12);   /* above a card total; the divider before the big total */
  --q-row-line:    transparent;             /* NO row lines on screen (decided 10 Nov). Print keeps faint ones */
  --q-pill-bd:     rgba(255,255,255,.12);
  --q-pill-empty:  rgba(255,255,255,.08);   /* dashed */

  /* [139000] the brand bar along the top of a page — the printed quote's own colours
     (css/quote-v2.css .qd2-band), mirrored so it can drift back and forth without a seam — and the
     glow it casts down the header: an opacity range the glow breathes between. 0 = no glow. */
  --q-brand:       linear-gradient(90deg, #ff00ff 0%, #fff200 27%, #55ff00 50%, #fff200 73%, #ff00ff 100%);
  --q-halo-lo:     .04;
  --q-halo-hi:     .12;
  --q-halo-mask:   radial-gradient(120% 100% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);  /* the glow's shape: strongest under the bar, gone by the readouts */
  /* the concrete readout's faint pill — measured-blue, barely there */
  --q-conc-bd:     rgba(90,169,240,.20);
  --q-conc-tint:   rgba(90,169,240,.045);
  --q-seg-on:      rgba(255,255,255,.10);   /* the selected option in a segmented switch (All | House | External) */
  --q-section-bar: #c9ccd0;                 /* the short white bar before TAKE-OFF */
  --q-section-fade:rgba(255,255,255,.16);   /* the rule that fades out after a section title */

  /* ── type ────────────────────────────────────────────────────────────────────────────── */
  --q-font:        'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --q-narrow:      'Archivo Narrow', 'Archivo', 'Inter', sans-serif;  /* the small caps labels */

  /* [139000] the header ("header 3", 10 Nov): the stage is the headline, the job sits beside the
     total in small type, the measures and labour are readouts — label, figure, unit — on one line */
  --q-fs-title:    30px;    /* the stage name (Footings), or "Summary" — the ONLY headline */
  --q-fs-bigtotal: 26px;    /* the lime total top-right — the ONLY big figure */
  --q-fs-job:      13px;    /* 14 Framont Ave / Test Building Co., right of the title */
  --q-fs-pill:     14px;    /* a readout's figure: SLAB 42 m² */
  --q-fs-labour:   14px;    /* DAYS 4  MAN-DAYS 8 — the same readouts */
  /* [140000] the card rows, at the POP-UP BOARDS' scale (canvas ②) — one scale for the stage page.
     Until 140000 the stage rows were sized from the app's own (print) units: 10.9 / 10.3 / 14,
     about 19% smaller than every pop-up board drew the same rows. */
  --q-fs-line:     13px;    /* a take-off item, a material line, a labour line */
  --q-fs-subline:  12.5px;  /* a take-off sub-row (3TM11 19.71 ea) */
  --q-fs-qty:      16px;    /* a take-off item's measure (53) */
  --q-fs-lunit:    12px;    /* a line's unit (m, m³, ea) */
  --q-fs-dims:     11px;    /* (300W x 400D) [450W x 450D] */
  --q-fs-tag:      9px;     /* BEAMS / SLAB / PIERS */
  --q-fs-group:    9.5px;   /* FOOTINGS · HOUSE, CONCRETE, LABOUR */
  --q-gap-cols:    28px;    /* between the take-off and the right-hand column */
  --q-fs-section:  13.5px;  /* TAKE-OFF, MATERIAL SCHEDULE */
  --q-fs-cardtotal:15.4px;  /* Materials Total / Labour Total figure */
  --q-fs-cardlabel:12.8px;  /* "Materials Total" */
  --q-fs-item:     10.9px;  /* a take-off item / labour line / money column */
  --q-fs-row:      10.3px;  /* sub-item rows, material rows */
  --q-fs-caps:     10px;    /* caps labels: TOTAL, SLAB, BUILDER */
  --q-fs-capsxs:   9px;     /* group headings inside cards, SUB ITEMS */

  --q-caps-ls:     1.3px;   /* letter-spacing for caps labels */
  --q-section-ls:  .95px;

  /* ── shape & space ───────────────────────────────────────────────────────────────────── */
  --q-r-card:      14px;
  --q-r-panel:     12px;
  --q-r-modal:     16px;
  --q-r-pill:      999px;
  --q-r-btn:       6px;
  --q-dot:         5px;     /* edited-by-hand dot: a TRUE circle, flex:0 0 auto so it never squashes */

  --q-gap-col:     22px;    /* between the two columns of cards */
  --q-pad-card:    10px 14px 14px;
  --q-row-y:       4px;     /* vertical padding of a row */
}

/* ── LIGHT — values from the app's own body.light theme, so it matches the rest of ATiQ ──── */
body.light{
  --q-page:        #f0efed;
  --q-card:        transparent;      /* [142000] light takes print's look (James, 10 Nov): */
  --q-card-bd:     rgba(0,0,0,.12);  /* hairline boxes on a white sheet, not white cards on grey */
  --q-sheet:       #ffffff;          /* the white is the A4 sheet, not the page */
  --q-sheet-bd:    rgba(0,0,0,.10);
  --q-row-hi:      rgba(0,0,0,.021);
  --q-surface:     #ffffff;
  --q-surface-bd:  rgba(0,0,0,.10);
  --q-shadow:      0 18px 48px rgba(0,0,0,.18);
  --q-scrim:       rgba(40,40,38,.40);

  --q-text:        #1a1a18;
  --q-sub:         #4a4844;
  --q-quiet:       #6b6860;
  --q-faint:       #a8a5a0;
  --q-ghost:       #a8a5a0;
  --q-row-label:   #8a8780;
  --q-row-empty:   #c9c6c0;

  --q-head:        #9a6a2c;   /* deeper orange — soft orange is unreadable on white */
  --q-measured:    #2b6cb0;
  --q-tag:         #3f6fa8;
  --q-total:       #1a1a18;   /* [142000] black ink, as print (was olive #5b7a00) */
  --q-total-fill:  #8fb800;   /* …but a lime BUTTON keeps a lime fill */
  --q-total-ink:   #1a1a18;
  --q-edited:      #5b7a00;
  --q-labour:      #1a1a18;   /* [142000] as print */
  --q-add:         #b5701b;
  --q-danger:      #b82020;
  --q-danger-tint: rgba(184,32,32,.06);
  --q-danger-bd:   rgba(184,32,32,.35);
  --q-measured-tint: rgba(43,108,176,.10);
  --q-hover:       rgba(0,0,0,.04);
  /* ok / warn on white were never drawn on the canvas. Deliberately left at the dark values
     until they are — a guessed colour here would look decided when it is not. */

  --q-input-bd:    rgba(154,106,44,.50);
  --q-input-bg:    #ffffff;

  --q-rule:        rgba(0,0,0,.060);
  --q-rule-strong: rgba(0,0,0,.12);  /* [142000] as print */
  --q-pill-bd:     rgba(0,0,0,.068);
  --q-pill-empty:  rgba(0,0,0,.068);
  --q-seg-on:      rgba(0,0,0,.06);
  --q-halo-lo:     .02;       /* colour shows more on white: half the glow */
  --q-halo-hi:     .06;
  --q-conc-bd:     rgba(0,0,0,.16);   /* [142000] as print */
  --q-conc-tint:   transparent;
  --q-section-bar: #33312e;
  --q-section-fade:rgba(0,0,0,.12);
  --q-tk-band:     rgba(0,0,0,.035);
}

/* ── PRINT — the printed A4 quote. Ink, not light: black totals, faint row lines kept ────── */
body.print{
  --q-page:        #ffffff;
  --q-card:        transparent;
  --q-card-bd:     rgba(0,0,0,.12);   /* hairline boxes instead of the fade */
  --q-sheet-bd:    transparent;
  --q-row-hi:      rgba(0,0,0,.021);

  --q-text:        #1a1a18;
  --q-sub:         #4a4844;
  --q-quiet:       #6b6860;
  --q-faint:       #a8a5a0;
  --q-ghost:       #a8a5a0;
  --q-row-label:   #8a8780;
  --q-row-empty:   #c9c6c0;

  --q-head:        #9a6a2c;
  --q-measured:    #2b6cb0;
  --q-tag:         #3f6fa8;
  --q-total:       #1a1a18;   /* black ink */
  --q-edited:      #8fb800;   /* kept, so the printed copy still shows what was overridden */
  --q-labour:      #1a1a18;

  --q-rule:        rgba(0,0,0,.060);
  --q-rule-strong: rgba(0,0,0,.12);
  --q-row-line:    rgba(0,0,0,.035);  /* print is the one mode that keeps faint row lines */
  --q-pill-bd:     rgba(0,0,0,.068);
  --q-pill-empty:  rgba(0,0,0,.068);
  --q-section-bar: #33312e;
  --q-halo-lo:     0;         /* paper: the bar, no glow */
  --q-halo-hi:     0;
  --q-conc-bd:     rgba(0,0,0,.16);
  --q-conc-tint:   transparent;
  --q-section-fade:rgba(0,0,0,.12);
  --q-tk-band:     transparent;       /* [142000] paper: no band, the table sits on the page */
}