@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ===========================================================================
   Kill Sync — design tokens
   ---------------------------------------------------------------------------
   Single source of truth for palette, type, spacing, radii and shadows.
   Shared by the desktop app and the public site, so it carries NO page
   layout: no grids, no components, no positioning. Tokens and the small
   set of element defaults that make the tokens actually apply.

   The system is dark-first and flat: depth comes from stacked surfaces and
   1px borders, not from shadows.
   =========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     SURFACES — darkest to lightest. Each step is one level "closer".
     ----------------------------------------------------------------------- */
  --ks-bg:              #0b0d10;  /* app canvas, page background          */
  --ks-surface-sunken:  #0e1114;  /* nav rail, sidebars, wells            */
  --ks-surface-1:       #12151a;  /* list rows, quiet fills               */
  --ks-surface-2:       #14181d;  /* panels, cards, inputs                */
  --ks-surface-3:       #171b21;  /* raised controls, buttons, chips      */
  --ks-surface-4:       #1b2027;  /* selected / active state              */
  --ks-surface-hover:   #1d2129;  /* hover on a surface-3 control         */

  /* BORDERS — subtle to loud */
  --ks-border:          #1e232a;  /* default divider, panel edge          */
  --ks-border-soft:     #232830;  /* quieter separator inside a panel     */
  --ks-border-mid:      #262c34;  /* chip / tag outline                   */
  --ks-border-strong:   #2b323b;  /* button outline, focus-adjacent edge  */
  --ks-border-loud:     #333b45;  /* emphasised edge, dragged item        */

  /* -----------------------------------------------------------------------
     TEXT
     ----------------------------------------------------------------------- */
  --ks-text:            #e8eaed;  /* primary                              */
  --ks-text-2:          #b6bdc6;  /* secondary body copy                  */
  --ks-text-muted:      #9aa3ae;  /* labels, inactive nav                 */
  --ks-text-dim:        #79828d;  /* metadata, monospace detail           */
  --ks-text-faint:      #757e89;  /* disabled, timestamps                 */
  --ks-text-invert:     #0b0d10;  /* on an accent fill                    */
  --ks-text-max:        #ffffff;

  /* -----------------------------------------------------------------------
     ACCENT — amber. The brand colour and the only colour used for links,
     primary actions and selection.
     ----------------------------------------------------------------------- */
  --ks-accent:          #f0b43c;
  --ks-accent-hover:    #ffd27a;
  --ks-accent-bright:   #e0a45c;
  --ks-accent-dim:      #a68a56;  /* accent text that must recede         */
  --ks-accent-deep:     #b8781f;  /* pressed / underline                  */
  --ks-accent-surface:  #3a3018;  /* filled accent chip background        */
  --ks-accent-tint:     #2a2313;  /* faint accent wash                    */
  --ks-accent-edge:     #4a3418;  /* border on an accent surface          */
  --ks-accent-wash:     #1a1410;  /* accent-tinted row background         */

  /* -----------------------------------------------------------------------
     STATUS — each has a foreground, a filled surface and a matching edge.
     ----------------------------------------------------------------------- */
  --ks-good:            #6fca7f;
  --ks-good-bright:     #a9d9b3;
  --ks-good-surface:    #101f1c;
  --ks-good-edge:       #21453c;

  --ks-info:            #3fc7d4;
  --ks-info-bright:     #d3e2e4;
  --ks-info-surface:    #101820;
  --ks-info-edge:       #23414f;

  --ks-warn:            #e0a45c;
  --ks-warn-surface:    #1a1410;
  --ks-warn-edge:       #3a2f1e;

  --ks-bad:             #e0868f;
  --ks-bad-bright:      #ff6b6b;
  --ks-bad-loud:        #ff5f6d;
  --ks-bad-surface:     #1e1518;
  --ks-bad-edge:        #3d2226;

  --ks-alt:             #b6bdc6;  /* fifth category, deliberately neutral */
  --ks-alt-surface:     #241726;
  --ks-alt-edge:        #43244a;

  /* -----------------------------------------------------------------------
     TYPE
     ----------------------------------------------------------------------- */
  --ks-font-display: "Chakra Petch", "Segoe UI Semibold", "Segoe UI", sans-serif;
  --ks-font-body:    Barlow, "Segoe UI", sans-serif;
  --ks-font-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Scale. The UI lives between 10.5 and 16; the top three sizes are for
     marketing surfaces and empty states. */
  --ks-size-2xs:  9px;
  --ks-size-xs:   10.5px;
  --ks-size-sm:   11.5px;
  --ks-size-md:   12.5px;   /* the workhorse                              */
  --ks-size-base: 13.5px;   /* nav items, body rows                       */
  --ks-size-lg:   16px;
  --ks-size-xl:   19px;
  --ks-size-2xl:  21px;
  --ks-size-3xl:  25px;

  --ks-weight-regular: 400;
  --ks-weight-medium:  500;
  --ks-weight-semi:    600;
  --ks-weight-bold:    700;

  --ks-leading-tight: 1.15;
  --ks-leading-snug:  1.35;
  --ks-leading-body:  1.6;

  /* Letter-spacing. The wide ones are for uppercase monospace labels — the
     house style for anything that names a column, a state or a section. */
  --ks-track-tight:  0.01em;
  --ks-track-normal: 0.04em;
  --ks-track-wide:   0.06em;   /* display / wordmark                      */
  --ks-track-wider:  0.10em;
  --ks-track-widest: 0.11em;   /* uppercase mono label                    */

  /* -----------------------------------------------------------------------
     SPACING — 2px-based, matching the density the UI actually uses.
     ----------------------------------------------------------------------- */
  --ks-space-0:  0;
  --ks-space-1:  2px;
  --ks-space-2:  4px;
  --ks-space-3:  6px;
  --ks-space-4:  8px;
  --ks-space-5:  10px;
  --ks-space-6:  12px;
  --ks-space-7:  14px;
  --ks-space-8:  16px;
  --ks-space-9:  20px;
  --ks-space-10: 24px;
  --ks-space-11: 32px;
  --ks-space-12: 40px;
  --ks-space-13: 48px;
  --ks-space-14: 64px;
  --ks-space-15: 80px;
  --ks-space-16: 112px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --ks-radius-xs:   2px;
  --ks-radius-sm:   3px;
  --ks-radius-md:   5px;   /* default: buttons, rows, panels              */
  --ks-radius-lg:   7px;
  --ks-radius-xl:   9px;
  --ks-radius-pill: 14px;
  --ks-radius-full: 999px;

  --ks-border-width: 1px;

  /* -----------------------------------------------------------------------
     SHADOWS — used sparingly. The flat surfaces above carry depth on their
     own; these are only for things that genuinely float above the page.
     ----------------------------------------------------------------------- */
  --ks-shadow-none:  none;
  --ks-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --ks-shadow-md:    0 6px 18px rgba(0, 0, 0, 0.45);
  --ks-shadow-lg:    0 18px 48px rgba(0, 0, 0, 0.55);
  --ks-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --ks-glow-accent:  0 0 0 1px var(--ks-accent-edge), 0 8px 28px rgba(240, 180, 60, 0.16);
  --ks-focus-ring:   0 0 0 2px var(--ks-bg), 0 0 0 4px var(--ks-accent);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ks-ease:        cubic-bezier(0.2, 0.8, 0.3, 1);
  --ks-duration-1:  90ms;
  --ks-duration-2:  160ms;
  --ks-duration-3:  280ms;

  --ks-z-base:    0;
  --ks-z-sticky:  100;
  --ks-z-overlay: 500;
  --ks-z-modal:   900;
  --ks-z-toast:   1200;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Element defaults. Enough to make the tokens take effect on a bare document
   without imposing any layout.
   --------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family: var(--ks-font-body);
  font-size: var(--ks-size-base);
  line-height: var(--ks-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ks-accent);
  text-decoration: none;
}
a:hover { color: var(--ks-accent-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--ks-focus-ring);
  border-radius: var(--ks-radius-sm);
}

code, kbd, samp, pre { font-family: var(--ks-font-mono); }

::selection {
  background: var(--ks-accent);
  color: var(--ks-text-invert);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}