/* The portal's design system.
 *
 * TAKEN FROM teragrid-console (src/app/globals.css), which took it from
 * AITG-SB/terabot-internal. Same token names, same values, so anyone comparing
 * the two reads one vocabulary rather than two. The brand is ORANGE in dark mode
 * and sky blue in light, exactly as the console has it.
 *
 * RGB CHANNELS ARE THE SOURCE OF TRUTH, as in the console: a theme swap then
 * only remaps channels rather than every colour that uses them, and an alpha
 * variant is rgb(var(--brand-rgb) / 0.4) without a second literal.
 *
 * SERVED FROM ONE FILE, linked by both index.html and the server-rendered auth
 * pages. Two copies of a token block is two copies that drift.
 *
 * FONTS ARE SELF-HOSTED, for the console's stated reason: this page runs
 * privileged actions, so an operator's address is not handed to Google on the
 * way to the sign-in form. The two woff2 files are the latin subsets of the
 * variable fonts, lifted from the console's own build.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Brand. Orange in this mode — the console's own dark value. */
  --brand-rgb: 244 106 27;
  --brand-deep-rgb: 214 84 12;
  --brand-ink-rgb: 255 156 120;

  /* Surfaces, coolest to warmest: paper is the page, cloud the raised card,
     rail the navigation, well a sunken area such as a code block. */
  --paper-rgb: 9 9 11;
  --cloud-rgb: 22 22 26;
  --rail-rgb: 14 14 17;
  --well-rgb: 11 14 23;

  /* Ink, 900 (strongest) to 100 (faintest rule). */
  --ink-900-rgb: 244 245 248;
  --ink-700-rgb: 214 216 223;
  --ink-500-rgb: 150 155 166;
  --ink-300-rgb: 108 113 124;
  --ink-200-rgb: 56 57 64;
  --ink-100-rgb: 38 39 45;

  /* Status, carried over by name so a badge means the same thing in both. */
  --avail-rgb: 74 222 128;
  --working-rgb: 251 191 36;
  --waiting-rgb: 248 113 113;
  --resting-rgb: 96 96 106;

  --coral-rgb: 248 113 113;
  --gold-rgb: 250 204 21;
  /* The console's "permission rather than machine" register. Used here for
     anything about access: keys, accounts, second factors. */
  --whisper-rgb: 167 139 250;
  --whisper-soft-rgb: 40 35 56;

  --shadow-pop: 0 18px 40px -18px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.05);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.5);
}

[data-theme="light"] {
  color-scheme: light;

  /* The console's light brand is its sky blue, because orange on white reads as
     a warning rather than as a brand. */
  --brand-rgb: 0 145 214;
  --brand-deep-rgb: 0 108 170;
  --brand-ink-rgb: 0 59 111;

  --paper-rgb: 247 250 252;
  --cloud-rgb: 255 255 255;
  --rail-rgb: 252 253 255;
  --well-rgb: 248 251 253;

  --ink-900-rgb: 10 27 46;
  --ink-700-rgb: 35 58 83;
  --ink-500-rgb: 91 113 134;
  --ink-300-rgb: 148 168 188;
  --ink-200-rgb: 210 221 231;
  --ink-100-rgb: 229 236 242;

  --avail-rgb: 46 160 67;
  --working-rgb: 191 135 0;
  --waiting-rgb: 209 63 51;
  --resting-rgb: 148 168 188;

  --coral-rgb: 209 63 51;
  --gold-rgb: 176 124 0;
  --whisper-rgb: 106 90 168;
  --whisper-soft-rgb: 240 237 250;

  --shadow-pop: 0 18px 40px -20px rgb(10 30 60 / 0.22), 0 0 0 1px rgb(10 30 60 / 0.05);
  --shadow-soft: 0 1px 2px -1px rgb(10 30 60 / 0.10);
}

:root {
  --brand: rgb(var(--brand-rgb));
  --brand-deep: rgb(var(--brand-deep-rgb));
  --brand-ink: rgb(var(--brand-ink-rgb));

  --paper: rgb(var(--paper-rgb));
  --cloud: rgb(var(--cloud-rgb));
  --rail: rgb(var(--rail-rgb));
  --well: rgb(var(--well-rgb));

  --ink-900: rgb(var(--ink-900-rgb));
  --ink-700: rgb(var(--ink-700-rgb));
  --ink-500: rgb(var(--ink-500-rgb));
  --ink-300: rgb(var(--ink-300-rgb));
  --ink-200: rgb(var(--ink-200-rgb));
  --ink-100: rgb(var(--ink-100-rgb));

  --avail: rgb(var(--avail-rgb));
  --working: rgb(var(--working-rgb));
  --waiting: rgb(var(--waiting-rgb));
  --resting: rgb(var(--resting-rgb));
  --coral: rgb(var(--coral-rgb));
  --gold: rgb(var(--gold-rgb));
  --whisper: rgb(var(--whisper-rgb));
  --whisper-soft: rgb(var(--whisper-soft-rgb));

  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); }

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

/* One focus treatment for the whole portal, as the console has. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--brand-rgb) / 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Respected globally: the only motion here is incidental and carries no
   meaning that would be lost. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* The theme switch, shared by every page that carries one. `width: auto` is not
   redundant: the auth pages style their form buttons `width: 100%`, and without
   this the switch stretches across the card. A class beats that element rule. */
.themeswitch {
  width: auto;
  flex: none;
  background: none;
  border: 1px solid rgb(var(--ink-200-rgb));
  color: var(--ink-500);
  border-radius: 999px;
  cursor: pointer;
  font: 11px/1 var(--font-mono);
  padding: 5px 10px;
}
.themeswitch:hover { color: var(--brand); border-color: rgb(var(--brand-rgb) / 0.5); }