/* QUIET tokens v1, copied verbatim from the design guide. Not edited, nothing added. */

:root {
  /* Surfaces */
  --bg:        #FFFFFF;   /* page, content */
  --bg-2:      #F9F8F7;   /* sidebar, panels, bars */
  --bg-3:      #F1F0EE;   /* hover */
  --bg-4:      #EAE9E7;   /* selected, pressed, inline code */

  /* Lines */
  --line:      #F0EFED;   /* hairline for structure */
  --line-2:    #D6D5D2;   /* edges of controls and dialogs */

  /* Text */
  --fg:        #37352F;
  --fg-2:      #656460;   /* secondary text, chrome labels */

  /* Accent: interactive or current state only */
  --accent:    #1B6EC2;
  --accent-fg: #FFFFFF;
  --sel:       rgba(27, 110, 194, 0.14);

  /* Semantic colours, kept quieter than the accent */
  --ok:    #2F6B47;  --ok-soft:   #EDF3EC;
  --warn:  #7A5A14;  --warn-soft: #FBF3DB;
  --err:   #B03A35;  --err-soft:  #FDEBEC;
  --info:  #1B6EC2;  --info-soft: #E1ECF8;

  /* Faces */
  --font-ui:     -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
                 Arial, sans-serif;
  --font-chrome: ui-monospace, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

  /* Sizes */
  --fs-chrome: 12px;  --fs-ui: 14px;  --fs-body: 16px;
  --fs-h2: 20px;      --fs-h1: 24px;  --fs-title: 32px;
  --lh-body: 1.6;     --lh-ui: 1.4;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Geometry */
  --radius:       3px;
  --row-h:        28px;
  --ctl-h:        28px;
  --bar-h:        40px;
  --page-w:       720px;
  --page-pad-top: 80px;

  /* Effects */
  --shadow-menu: 0 1px 0 var(--line-2), 0 4px 12px rgba(0, 0, 0, 0.08);
  --t-fast:      120ms ease-out;
  --focus:       0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

[data-theme="dark"] {
  --bg:        #191919;
  --bg-2:      #202020;
  --bg-3:      #2A2A2A;
  --bg-4:      #333333;
  --line:      #2C2C2B;
  --line-2:    #3D3D3C;
  --fg:        #D4D4D4;
  --fg-2:      #9B9B9B;
  --accent:    #5EA9F0;
  --accent-fg: #191919;
  --sel:       rgba(94, 169, 240, 0.22);
  --ok:    #7BC69A;  --ok-soft:   #1F2A23;
  --warn:  #D4A855;  --warn-soft: #2B271B;
  --err:   #F08C88;  --err-soft:  #2E1F1F;
  --info:  #5EA9F0;  --info-soft: #1C2531;
  --shadow-menu: 0 1px 0 var(--line-2), 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; } }