/* Slipstream Workspaces: design tokens.
   EVERY colour, font and size the site uses lives here and nowhere else, so changing a
   design rule is a one-line edit. Other stylesheets only ever read var(--...).
   Values copied from the live Slipstream desk, Charcoal theme, default accent (job #899), and
   from its Chart window (job #900); the live name of each is in the comment. Greys are true neutrals (red = green = blue). */

/* Fonts, self-hosted (no visitor data goes anywhere else). Latin subsets only, the same
   files the live app ships. IBM Plex Sans and IBM Plex Sans Condensed: SIL Open Font
   License 1.1, see fonts/OFL.txt. */
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(../fonts/plex-sans-latin.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/plex-sans-condensed-400-latin.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/plex-sans-condensed-500-latin.woff2) format('woff2'); }

:root{
  /* Neutral greys, darkest to lightest */
  --g-black: #000000;   /* ink on the accent */
  --g-desk:  #050505;   /* the canvas              (live --desk) */
  --g-bar:   #0b0b0b;   /* bars and page           (live --bar, --bg) */
  --g-pill:  #0d0d0d;   /* readout on a selected window's bar (live .ws-foc .ws-oh) */
  --g-surf:  #101010;   /* window body, chart      (live --surface) */
  --g-raise: #151515;   /* chart menu bar, lists   (live --surface-2) */
  --g-hover: #202020;   /* hover fill              (live --hover, --surface-3) */
  --g-hover2:#2a2a2a;   /* hover fill on the +     (live --rc-hov) */
  --g-line:  #2e2e2e;   /* hairlines               (live --line, --rc-line) */
  --g-tag:   #363636;   /* the crosshair's tags    (live chart xTag) */
  --g-wbar:  #424242;   /* a window's title bar    (live --hd-u) */
  --g-4:     #6e6e6e;   /* faint text, focus ring  (live --text-4, --rc-foc) */
  --g-t0:    #7f7f7f;   /* a plain time label      (live ADV_TX_INK) */
  --g-axis:  #8a8a8a;   /* a chart's scale text    (live chart axis) */
  --g-3:     #919191;   /* muted text              (live --text-3) */
  --g-t1:    #a8a8a8;   /* a day's time label      (live ADV_TX_INK) */
  --g-2:     #b8b8b8;   /* toolbar labels          (live --text-2) */
  --g-t2:    #d2d2d2;   /* a month's time label    (live ADV_TX_INK) */
  --g-acc:   #d4d4d4;   /* the accent: silver      (live --acc, --brand) */
  --g-text:  #e4e4e4;   /* body text               (live --text) */
  --g-t3:    #ececec;   /* a year's time label, tag text (live ADV_TX_INK, xTag) */
  --g-white: #ffffff;   /* the wordmark            (live --text-hi) */

  /* Up and down: green and red, each pair tuned for what it sits on */
  --up:        #41c48e;   /* candles                       (live chart v3 up) */
  --down:      #e8584f;   /*                               (live chart v3 dn) */
  --up-bar:    #5cf59a;   /* on a window's grey title bar  (live --hd-u-up) */
  --down-bar:  #ffa8a8;   /*                               (live --hd-u-down) */
  --up-pill:   #3ee08a;   /* on the selected bar's readout (live .ws-foc .ws-oh --up) */
  --down-pill: #ff6b64;   /*                               (live .ws-foc .ws-oh --down) */
  --close:     #c42b1c;   /* the close x under the pointer (live .ws-close:hover) */

  /* White over a chart, by strength */
  --w-06: rgba(255,255,255,.06);
  --w-35: rgba(255,255,255,.35);
  --w-45: rgba(255,255,255,.45);
  --w-78: rgba(255,255,255,.78);

  /* Roles: what each part uses. Point a role at another grey to restyle it. */
  --c-page:        var(--g-bar);
  --c-text:        var(--g-text);
  --c-bar:         var(--g-bar);     /* title bar, toolbar, tab strip */
  --c-canvas:      var(--g-desk);
  --c-line:        var(--g-line);
  --c-hover:       var(--g-hover);
  --c-hover-text:  var(--g-text);
  --c-focus:       var(--g-4);
  --c-logo:        var(--g-white);
  --c-acct:        var(--g-3);       /* account button text */
  --c-av:          var(--g-acc);     /* account initial's disc */
  --c-av-ink:      var(--g-black);
  --c-tool:        var(--g-2);       /* toolbar button label */
  --c-tool-icon:   var(--g-acc);     /* toolbar button icon (live --acc-ic) */
  --c-empty:       var(--g-3);       /* "Empty workspace" */
  --c-tab:         var(--g-3);
  --c-tab-n:       var(--g-4);       /* a tab's window count */
  --c-tab-on:      var(--g-acc);     /* the open tab's fill (live --sel-grad, which is flat) */
  --c-tab-on-ink:  var(--g-black);   /* (live --hd-s-ink) */
  --c-add:         var(--g-3);
  --c-add-hover:   var(--g-hover2);

  /* Windows (job #900). The selected window (the one last pressed) wears the accent. */
  --c-win:            var(--g-surf);
  --c-win-line:       var(--g-line);
  --c-win-line-on:    var(--g-acc);
  --c-wbar:           var(--g-wbar);
  --c-wbar-ink:       var(--g-white);
  --c-wbar-up:        var(--up-bar);
  --c-wbar-down:      var(--down-bar);
  --c-wbar-on:        var(--g-acc);
  --c-wbar-on-ink:    var(--g-black);
  --c-pill:           var(--g-pill);
  --c-pill-up:        var(--up-pill);
  --c-pill-down:      var(--down-pill);
  --c-close:          var(--close);
  --c-close-ink:      var(--g-white);

  /* The chart's menu bar and its lists */
  --c-menu:           var(--g-raise);
  --c-menu-line:      var(--g-line);
  --c-symb:           var(--g-surf);     /* the symbol box */
  --c-symb-line:      var(--g-line);
  --c-symb-line-hover:var(--g-3);
  --c-symb-ink:       var(--g-white);
  --c-symb-caret:     var(--g-acc);
  --c-mb:             var(--g-2);        /* a menu button: Timeframe */
  --c-mb-icon:        var(--g-acc);
  --c-mb-caret:       var(--g-3);
  --c-mb-hover:       var(--g-hover);
  --c-mb-hover-ink:   var(--g-white);
  --c-mbv:            var(--g-hover);    /* its value: "5m" */
  --c-mbv-hover:      var(--g-surf);
  --c-mbv-ink:        var(--g-white);
  --c-sep:            var(--g-line);
  --c-pop:            var(--g-raise);    /* a list opened from the menu bar */
  --c-pop-line:       var(--g-line);
  --c-pop-head:       var(--g-4);
  --c-pop-row:        var(--g-2);
  --c-pop-key:        var(--g-text);
  --c-pop-hover:      var(--g-hover);
  --c-pop-hover-ink:  var(--g-text);
  --c-pop-on:         var(--g-white);
  --c-pop-none:       var(--g-3);
  --c-srch:           var(--g-surf);     /* the search box in the symbol list */
  --c-srch-icon:      var(--g-3);

  /* The chart itself (the live chart's Minimal design, v3) */
  --c-chart:          var(--g-surf);
  --c-chart-axis:     var(--g-axis);
  --c-chart-up:       var(--up);
  --c-chart-down:     var(--down);
  --c-chart-sep:      var(--g-axis);     /* session breaks: drawn at 5% (shade), 45% (line), 80% (day name) */
  --c-chart-cross:    var(--w-45);
  --c-chart-tag:      var(--g-tag);
  --c-chart-tag-line: var(--w-06);
  --c-chart-tag-ink:  var(--g-t3);
  --c-chart-hl-line:  var(--w-35);       /* the high and low in view */
  --c-chart-hl:       var(--w-78);
  --c-chart-t0:       var(--g-t0);       /* time labels: plain, a day, a month, a year */
  --c-chart-t1:       var(--g-t1);
  --c-chart-t2:       var(--g-t2);
  --c-chart-t3:       var(--g-t3);
  --c-chart-msg:      var(--g-3);

  /* Type: Plex Sans for the frame, Plex Sans Condensed for buttons, tabs and labels */
  --f-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;   /* live --ui */
  --f-cond: 'IBM Plex Sans Condensed', -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;   /* live --cond */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --lh:    1.3;
  --fw-strong: 500;
  --o-tab-n-on: .75;   /* the open tab's count, faded */

  /* Sizes */
  --title-h:   30px;   /* title bar: wordmark, account */
  --tools-h:   36px;   /* toolbar */
  --tabs-h:    24px;   /* tab strip, its 1px top line included */
  --logo-h:    14px;   /* the wordmark's height */
  --bar-pad:   8px;    /* side padding of the bars */
  --tool-h:    26px;   /* toolbar button */
  --tool-pad:  8px;
  --tool-gap:  6px;    /* icon to label */
  --tool-icon: 15px;
  --tools-gap: 2px;    /* between toolbar buttons */
  --acct-pad:  8px;
  --acct-gap:  6px;
  --av:        18px;   /* account initial's disc */
  --caret:     12px;
  --tab-pad-l: 12px;
  --tab-pad-r: 24px;   /* live: 4px + the 14px close x + 6px; the x comes back later in this space */
  --tab-gap:   6px;
  --tab-max:   240px;
  --add-w:     24px;
  --add-icon:  12px;
  --empty-gap: 6px;
  --empty-pad: 20px;
  --radius:    2px;    /* live --rad */
  --line:      1px;

  /* Windows (job #900). Corners are square (design rule 5): no radius on anything below. */
  --win-gap:     2px;    /* between windows and round the canvas edge (design rule 6) */
  --win-min-w:   240px;
  --win-min-h:   160px;
  --wbar-h:      22px;   /* title bar */
  --wbar-pad-l:  8px;
  --wbar-pad-r:  2px;
  --wbar-gap:    6px;
  --wx:          18px;   /* the close x */
  --wx-icon:     13px;
  --ro-h:        16px;   /* the readout: price and change */
  --ro-gap:      8px;
  --ro-gap-on:   10px;
  --ro-pad:      8px;
  --ro-ml:       4px;
  --ro-ml-on:    6px;
  --rs-out:      3px;    /* resize edges: how far past the window, how thick, a corner's length */
  --rs-thick:    7px;
  --rs-corner:   16px;
  --menu-h:      30px;   /* the chart's menu bar */
  --menu-pad:    6px;
  --symb-h:      22px;
  --symb-min:    76px;
  --symb-pad-l:  8px;
  --symb-pad-r:  6px;
  --symb-gap:    6px;
  --symb-ls:     .2px;
  --caret-s:     11px;
  --sep-h:       16px;
  --sep-m:       5px;
  --mb-h:        24px;
  --mb-pad:      6px;
  --mb-gap:      4px;
  --mb-icon:     15px;
  --mbv-h:       16px;
  --mbv-min:     16px;
  --mbv-pad:     4px;
  --pop-min:     200px;
  --pop-pad:     4px;
  --pop-row-v:   4px;
  --pop-row-h:   12px;
  --pop-row-gap: 8px;
  --pop-key-w:   34px;
  --pop-head-t:  8px;
  --pop-head-b:  2px;
  --pop-max-h:   320px;
  --pop-edge:    6px;    /* a list is kept this far inside the browser window */
  --srch-h:      30px;
  --srch-gap:    6px;
  --srch-icon:   14px;
  --chart-axis-w:66px;   /* the price scale */
  --chart-time-h:24px;   /* the time scale */
  --chart-tag-h: 19px;   /* a tag on a scale */
  --fs-chart:    11px;   /* scale labels */
  --fs-chart-tag:11.5px; /* the last price and the crosshair's price */
  --fs-chart-hl: 10.5px; /* the high and low marks */
  --fs-chart-day:10px;   /* the day names at session breaks */

  /* Motion */
  --t-fast: .12s;

  /* Breakpoint used in app.css (CSS variables cannot sit in a media query, so it is repeated there):
     phone = max-width 600px */
}