/* =============================================================
   QuakBox — design tokens
   Phase 1 of the interface work.

   This file is the whole point: drop it into the React app,
   replace the hand-copied Tailwind and Bootstrap hex values with
   these variables, and all 45 screens move at once. Nothing below
   is specific to this prototype.
   ============================================================= */

:root {
  /* ---- ground & surfaces -------------------------------------
     One ground, two surfaces. Anything that needs to sit above
     the page uses --q-surface with a shadow, never a border. */
  --q-ground:        #FAFBFC;
  --q-surface:       #FFFFFF;
  --q-surface-sunk:  #F2F4F6;

  /* The navbar — the one dark element, and the one part of the
     current app the client asked to keep. His exact values:
     rgb(0.466, 0.477, 0.532) → rgb(0.317, 0.344, 0.391).
     The light tone sits in the top quarter only: white text fails
     contrast on #777A88 (4.27:1) but clears it comfortably on
     #515864 (7.17:1), so the highlight reads as a lit edge rather
     than a field text has to sit on. */
  --q-slate-lit:     #777A88;
  --q-slate:         #515864;
  --q-slate-bar:     linear-gradient(180deg,
                       var(--q-slate-lit) 0%,
                       var(--q-slate) 58%,
                       var(--q-slate) 100%);
  --q-slate-ink:     #C7CED6;   /* 4.5:1 on --q-slate */

  /* ---- ink ---------------------------------------------------
     Four steps. If a fifth is ever needed the hierarchy is wrong.
     ink-3 is the lightest step that may carry readable text: it
     clears 4.5:1 on all three surfaces. ink-4 is decoration only —
     separators, dashed edges, disabled glyphs — never a sentence
     someone has to read. */
  --q-ink:           #12171E;   /* 17.4:1 on ground */
  --q-ink-2:         #414C5A;   /*  8.4:1 */
  --q-ink-3:         #656F7C;   /*  4.9:1 — text floor */
  --q-ink-4:         #99A2AE;   /*  decoration only */

  /* ---- line --------------------------------------------------
     Hairlines only. A 1px line separates; a box encloses, and
     enclosing everything is what made the old screens read as a
     dashboard. */
  --q-line:          #E7EAEE;
  --q-line-strong:   #D5DAE0;

  /* ---- accent ------------------------------------------------
     Exactly one. The flags carry the colour on this product, so
     the interface stays out of their way. */
  --q-accent:        #0F5F6B;
  --q-accent-hover:  #0B4B55;
  --q-accent-ink:    #FFFFFF;
  --q-accent-wash:   #E8F1F2;
  --q-accent-line:   #BFD8DB;

  /* ---- signal ------------------------------------------------ */
  --q-live:          #C53B2B;   /* broadcasting, now — 4.6:1 on its wash */
  --q-live-wash:     #FDECE9;
  --q-online:        #2E9E5B;   /* presence */
  --q-warn:          #B4690E;

  /* ---- type --------------------------------------------------
     System stack. This is app UI: the face should disappear and
     let the content read. Character comes from scale and rhythm. */
  --q-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --q-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --q-t-display: 2.125rem;   /* 34 — country name, page title      */
  --q-t-title:   1.3125rem;  /* 21 — section heads, post author     */
  --q-t-lead:    1.0625rem;  /* 17 — post body                      */
  --q-t-body:    0.9375rem;  /* 15 — default                        */
  --q-t-small:   0.8125rem;  /* 13 — meta, timestamps               */
  --q-t-micro:   0.6875rem;  /* 11 — labels, counts                 */

  --q-lh-tight: 1.15;
  --q-lh-snug:  1.35;
  --q-lh-body:  1.55;

  --q-track-display: -0.025em;
  --q-track-title:   -0.015em;
  --q-track-label:    0.06em;

  /* ---- space -------------------------------------------------
     4px base. Tight inside a group, generous between groups. */
  --q-1:  0.25rem;
  --q-2:  0.5rem;
  --q-3:  0.75rem;
  --q-4:  1rem;
  --q-5:  1.5rem;
  --q-6:  2rem;
  --q-7:  2.75rem;
  --q-8:  4rem;

  /* ---- radius ------------------------------------------------ */
  --q-r-sm:   6px;
  --q-r-md:   10px;
  --q-r-lg:   16px;
  --q-r-full: 999px;

  /* ---- elevation ---------------------------------------------
     Offset and blur, always. A halo with no offset is decoration
     pretending to be depth. */
  --q-e-1: 0 1px 2px rgba(18, 23, 30, .05),
           0 1px 1px rgba(18, 23, 30, .03);
  --q-e-2: 0 2px 4px rgba(18, 23, 30, .05),
           0 6px 16px rgba(18, 23, 30, .06);
  --q-e-3: 0 8px 20px rgba(18, 23, 30, .08),
           0 24px 48px rgba(18, 23, 30, .10);

  /* ---- layout ------------------------------------------------ */
  --q-nav-h:      58px;
  --q-rail-w:     72px;
  --q-stream-w:   620px;
  --q-aside-w:    290px;
  --q-shell-max:  1400px;

  /* ---- motion ------------------------------------------------
     One curve. Everything that moves in this product moves the
     same way. */
  --q-ease: cubic-bezier(.2, .8, .2, 1);
  --q-fast: 120ms;
  --q-mid:  220ms;
  --q-slow: 380ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --q-fast: 1ms; --q-mid: 1ms; --q-slow: 1ms; }
}