/* Hyde's Project Zomboid Tool-Kit — design tokens.
   The only file in the kit that contains a hex value. Loaded by the landing
   page and both tools.

   Accent rule: brand and state are separated by ROLE, not hue. Blue and orange
   are brand only — hairline, wordmark, marketing CTA. State uses three hues,
   one job each, so no colour ever means six things at once (amber used to mean
   brand, current, selected-sheet, warning, error and link simultaneously). */

:root {
  /* -- brand ------------------------------------------------------------- */
  --hc-brand-blue:        #1C6CFF;
  --hc-brand-blue-soft:   #7FA7FF;
  --hc-brand-orange:      #FF7A00;
  --hc-brand-orange-soft: #FFB066;
  --hc-brand-deep:        #0D2F8B;

  /* -- state: exactly one meaning each ----------------------------------- */
  --hc-focus:     #FFB648;   /* CURRENT — the one thing you are looking at   */
  --hc-focus-hi:  #FFD691;   /* current, raised                              */
  --hc-focus-ink: #1A1206;   /* text on an amber fill                        */
  --hc-hover:     #5AD1FF;   /* HOVERABLE + metadata key                     */
  --hc-hover-ring: rgba(90,209,255,.16);
  --hc-pick:      #5FE08D;   /* COLLECTED + go                               */
  --hc-pick-ink:  #DCFFE8;
  --hc-pick-dim:  #9FD39F;   /* "unused / free art" label                    */
  --hc-bad:       #FF8F8F;   /* error, and nothing else                      */
  --hc-bad-bg:    rgba(255,143,143,.10);

  /* -- neutral ramp ------------------------------------------------------ */
  --hc-bg-0:      #0E1013;   /* page                                         */
  --hc-bg-1:      #121519;   /* inset: inputs, wells                         */
  --hc-bg-2:      #171B21;   /* panels, rails, trays                         */
  --hc-bg-3:      #1F242C;   /* raised: buttons at rest, hovered rows         */
  --hc-line:      #2B323C;
  --hc-line-2:    #39424F;
  --hc-void:      #0A0C0F;   /* behind sprites                               */
  --hc-ink:       #EEF1F6;
  --hc-ink-2:     #CFD6E0;
  --hc-ink-dim:   #8D97A6;
  --hc-ink-dimmer:#5F6875;   /* decorative only — never text at <=11px       */

  /* -- type: 6 steps, no half-pixels ------------------------------------- */
  --hc-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --hc-mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, monospace;
  --hc-fs-eyebrow: 10px;
  --hc-fs-micro:   11px;
  --hc-fs-body:    13px;
  --hc-fs-md:      15px;
  --hc-fs-lg:      19px;
  --hc-fs-xl:      24px;
  --hc-lh-tight: 1.25;
  --hc-lh:       1.5;
  --hc-track-cap:   1.8px;
  --hc-track-brand: 2.2px;
  --hc-track-tight: -.2px;

  /* -- spacing: 4px base ------------------------------------------------- */
  --hc-s0: 2px;  --hc-s1: 4px;  --hc-s2: 8px;   --hc-s3: 12px;
  --hc-s4: 16px; --hc-s5: 24px; --hc-s6: 32px;

  /* -- radius: 4 stops --------------------------------------------------- */
  --hc-r-sm:   4px;
  --hc-r:      6px;
  --hc-r-lg:  12px;
  --hc-r-pill: 999px;

  /* -- elevation, rings, motion ------------------------------------------ */
  --hc-shadow-1: 0 2px 10px rgba(0,0,0,.5);
  --hc-shadow-2: 0 8px 26px rgba(0,0,0,.6);
  --hc-shadow-3: 0 20px 60px rgba(0,0,0,.85);
  --hc-ring-focus:   0 0 0 3px var(--hc-hover-ring);
  --hc-ring-current: 0 0 0 2px rgba(255,182,72,.40);
  --hc-ring-pick:    0 0 0 2px rgba(95,224,141,.45);
  --hc-t-fast: .10s;
  --hc-t:      .16s;
  --hc-ease: cubic-bezier(.2,.6,.3,1);

  /* -- chrome sizing. hc-ui.css retunes these for the tools; the landing
        page takes them as they stand here. --------------------------------- */
  --hc-bar-h:        56px;
  --hc-control-h:    32px;
  --hc-control-h-sm: 28px;
  --hc-tray-h:       52px;
  --hc-rail-w:      264px;
  --hc-inspector-w: 320px;

  /* -- shared decoration ------------------------------------------------- */
  --hc-rule: linear-gradient(90deg, transparent,
             rgba(28,108,255,.7), rgba(255,122,0,.7), transparent);
  --hc-checker: repeating-conic-gradient(#23262c 0 25%, #1a1d22 0 50%) 0 0 / 16px 16px;

  /* -- z-index ladder ---------------------------------------------------- */
  --z-base: 0; --z-sticky: 10; --z-bar: 20; --z-drag: 30;
  --z-popover: 40; --z-modal: 50; --z-toast: 60; --z-fatal: 70;
}