/* Design tokens (docs/ui-spec.md § Visuals and § Status light). Every colour, size and font the
   other stylesheets use is defined here; nothing loads from outside this folder (CSP 'self'). */
:root {
  /* Sky and cloud */
  --sky-top: #78c6f0;
  --sky-bottom: #d6f0fc;
  --cloud-top: #ffffff;
  --cloud-bottom: #eaf4fb;
  --cloud-shadow: rgba(38, 96, 140, 0.3);

  /* Monitor plastic */
  --bezel: #d9d1c0;
  --bezel-light: #e7e1d2;
  --bezel-dark: #cbc2ac;
  --bezel-edge: #a99f88;
  --bezel-emboss-text: #a29984;

  /* Terminal glass and phosphor */
  --glass: #0b0f0a;
  --glass-glow: #16240f;
  --phosphor: #9cff9c;
  --phosphor-dim: #62b262;
  --phosphor-echo: #d6ffd6;
  --phosphor-rule: rgba(156, 255, 156, 0.45);
  --phosphor-glow: rgba(156, 255, 156, 0.4);

  /* Status light: lit colour and its unlit (dim) phase */
  --led-red: #ff3b30;
  --led-amber: #ffa000;
  --led-green: #2fd158;
  --led-red-off: #4d1c19;
  --led-amber-off: #4d3812;
  --led-green-off: #1b3d25;

  /* Trays (cream panels) */
  --paper: #f7f0dc;
  --paper-edge: #dccfae;
  --paper-shade: #eadfc2;
  --ink: #372f20;
  --ink-dim: #7a6f58;
  --online: #2fd158;
  --warn-bg: #fff0c2;
  --warn-ink: #6b4a00;
  /* The DNS notice once the name points at the server (OR-2): the LED green (#2fd158) as a pale tint, with a dark
     green of the same hue for the text, since the LED green itself is too light to read on the tray. */
  --ok-bg: #daf7e1;
  --ok-ink: #14532d;

  /* Keycaps */
  --key-top: #f5efde;
  --key-bottom: #e3d9bf;
  --key-edge: #a99f86;
  --key-danger-top: #f2594d;
  --key-danger-bottom: #c7261c;
  --key-danger-edge: #7c130d;

  /* Fonts: D-22, the system monospace stack for the terminal; the system UI stack elsewhere. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --terminal-size: 14px;
  --terminal-leading: 1.35;

  /* Layout */
  --gap: 24px;
  --tray-width: 240px;
  --page-pad: 24px;
  /* How far the cloud reaches beyond the monitor: CLOUD_PAD in cloud-frame.js (the inflation plus
     the largest bump). The stage reserves it as the cloud margin. */
  --cloud-pad: 48px;
  --cloud-margin: 48px;
  --cloud-margin-x: 48px;
  --bezel-side: 26px;
  --bezel-bottom: 44px;
  --bezel-radius: 18px;
  --glass-radius: 12px;

  /* Timing */
  --led-period: 1s;
  --cursor-period: 1.06s;
}

@media (max-width: 699px) {
  :root {
    --page-pad: 12px;
    /* On a phone the monitor takes the whole width and the cloud runs off the screen's edge. */
    --cloud-margin: 43px;
    --cloud-margin-x: 3px;
  }
}