/* theme.css — the tokens, and nothing else.
 *
 * No element anywhere in this console gets a colour, a measure or a shadow of
 * its own; it gets one of these. Swapping the palette is this file and no
 * other.
 *
 *
 * THE COLOURS ARE VIETJET'S, SPLIT BY ROLE
 *
 * Read out of their own stylesheet rather than sampled from a screenshot:
 * toolbar red #d91a21, call-to-action yellow #f9a51a → #fedc00, body ink
 * #282828.
 *
 * Red is the brand AND red is what "something is wrong" looks like, and this
 * console exists to report that a lock did not engage. So the two are split by
 * ROLE: red is identity (the sidebar brand, the mark) and alarm (an error, a
 * destructive button); yellow is the thing you are meant to press. Nothing
 * else is coloured.
 *
 * Every grey is mixed from the ink, so no two neutrals on a page are slightly
 * different neutrals.
 *
 *
 * THE SHAPE: AN APPLICATION, NOT A DOCUMENT
 *
 * A fixed dark column of navigation, a thin white toolbar above the page, and
 * content as cards on a light desk. Light only; the screen that lives in the
 * dim hangar is the cabinet's own panel, which is the Android application.
 */

:root {
  /* ── Brand ──────────────────────────────────────────────────── */
  --brand:        #d91a21;
  --brand-dark:   #6f0000;
  --brand-bright: #ec2029;
  --brand-bar:    #ca161c;   /* a flat bar, as on their own sign-in page */

  /* What you press. The gradient is their booking panel's call to action. */
  --accent:      #fedc00;
  --accent-dark: #f9a51a;
  --on-accent:   #282828;
  --accent-gradient: linear-gradient(26.73deg,
                     #f9a51a 13.7%, #fbb612 29.8%, #ffdd00 66.81%);

  /* ── Ink, and the greys mixed from it ──────────────────────── */
  --ink:    #282828;
  --ink-60: #6b6d72;
  --ink-45: #93959a;
  --ink-25: #c2c3c6;

  /* ── Surfaces ───────────────────────────────────────────────── */
  --paper: #ffffff;          /* a card */
  --desk:  #f1f3f5;          /* the page behind the cards */
  --rule:      #d9dbde;      /* a card edge, a table rule */
  --rule-soft: #e8eaec;
  --tint:      #f4f5f7;      /* a table head, a hovered row */
  --tint-soft: #fafbfc;

  /* ── The navigation column ──────────────────────────────────── */
  --nav-bg:      #1f2124;
  --nav-ink:     #c9ccd1;
  --nav-ink-dim: #85888e;
  --nav-hover:   rgba(255, 255, 255, .07);
  --nav-active:  rgba(255, 255, 255, .12);
  --nav-rule:    rgba(255, 255, 255, .09);

  /* The sky behind the sign-in panel: their cloud photograph as gradients,
     because the gate is the page an installer opens when nothing else works
     and it must not wait on an image to arrive. */
  --sky:
    radial-gradient(105% 78% at 6% -4%,
      #fbe4ef 0%, rgba(251, 228, 239, 0) 60%),
    radial-gradient(90% 85% at 96% 0%,
      #cfe4f7 0%, rgba(207, 228, 247, 0) 64%),
    radial-gradient(80% 44% at 20% 92%,
      rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(60% 34% at 80% 100%,
      rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(178deg, #e7eef8 0%, #dde8f4 48%, #f3f6fa 100%);

  /* ── Status ─────────────────────────────────────────────────────
   * Warning is the brand orange darkened until it reads as text. Error is the
   * brand red. Green is not from the palette -- there is none in it, and one
   * invented to harmonise would make "everything is fine" quieter than it
   * ought to be on a page whose job is to be believed. */
  --ok:      #12694a;
  --ok-bg:   #e7f3ec;
  --ok-line: #b3d8c4;

  --warn:      #8a5300;
  --warn-bg:   #fdf3e3;
  --warn-line: #edd3a5;

  --err:      #a8232c;
  --err-bg:   #fbecec;
  --err-line: #eebcbc;

  --info:      #1d4e89;
  --info-bg:   #eaf0f8;
  --info-line: #c2d3e8;

  /* ── Type ───────────────────────────────────────────────────────
   * One family. Vietjet's own is KoHo, which they load from Google Fonts;
   * this console does not, because it is served by the same binary as the API
   * on a server that may have no route to the internet. KoHo is named first
   * and used when the machine has it. */
  --sans:  "KoHo", system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  /* ── Measures ───────────────────────────────────────────────── */
  --nav-width:   232px;
  --topbar-h:    52px;
  --measure:     78ch;      /* how long a line of prose may get */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── Shape ──────────────────────────────────────────────────── */
  --radius:       10px;
  --radius-field: 6px;
  --btn-height:   36px;

  --shadow-card:  0 1px 2px rgba(40, 40, 40, .05);
  --shadow-pop:   0 10px 30px rgba(40, 40, 40, .16),
                  0 2px 6px rgba(40, 40, 40, .08);
  --shadow-float: 0 14px 40px rgba(40, 40, 40, .13),
                  0 2px 6px rgba(40, 40, 40, .07);
}