/* Billet design tokens.
 *
 * The ONLY file in the portal permitted to contain a literal colour. Ported
 * from ../billetstream-marketing/src/styles/global.css. The status ramp is
 * additive and is specified in
 * docs/superpowers/specs/2026-09-01-portal-ui-billet-design.md section 5.
 *
 * Ratios in the comments are measured against --ink (the canvas) and --ink-2
 * (a white card), and are asserted by portal/tests/ui_contrast.rs. Do not edit
 * a value without running that test.
 */

@font-face {
  font-family: "Michroma";
  src: url("/static/fonts/michroma-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

@font-face {
  font-family: "ArchivoVar";
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* Canvas. Grey, not cream, and light, not navy: the brand's own reasoning is
     that grey with a geometric sans reads as infrastructure. */
  --ink:    #F1F3F6;
  --ink-2:  #FFFFFF;
  --ink-3:  #E7EBF1;

  /* Text. --fg-3 is deliberately not the obvious lighter grey: #78869E
     measures 3.31:1 on the canvas and fails for text. */
  --fg:     #0E1B2E;   /* 15.55:1 canvas */
  --fg-2:   #55647E;   /*  5.38:1 canvas,  5.98:1 card */
  --fg-3:   #626F87;   /*  4.56:1 canvas,  5.07:1 card */

  --line:   rgba(14, 27, 46, 0.11);
  --line-2: rgba(14, 27, 46, 0.20);

  /* Brand ramp. */
  --deep:   #1B3A8F;
  --royal:  #2563EB;
  --bright: #0E86FF;
  --cyan:   #22D3EE;   /* 1.61:1 here. Never text, never a focus ring. */
  --violet: #7C3AED;

  /* Components name this and never a ramp colour, so the accent can move
     again without every component moving with it. */
  --accent: #2563EB;   /* 4.65:1 canvas, 5.17:1 card */

  /* Status. Blue is online with no session, green is someone connected.
     Dark-on-light, so unlike the previous dark ramp every value clears AA on
     the canvas AND on a white card and there is no per-surface variant. */
  --st-in-use:   #0F7A43;  /*  4.90 canvas,  5.45 card */
  --st-idle:     #1B3A8F;  /*  9.22 canvas, 10.25 card. Deep, not royal: royal
                               is the accent, and every idle row would read as
                               a link. */
  --st-degraded: #8A5A00;  /*  5.33 canvas,  5.93 card */
  --st-offline:  #B3261E;  /*  5.88 canvas,  6.54 card */
  --st-unknown:  #626F87;  /*  4.56 canvas,  5.07 card */

  /* Type. Michroma ships one weight and is extremely wide: short strings only.
     Monospace is its fallback because monos are the only widely installed
     category with comparable advance widths, so the swap barely reflows. */
  --font-display: "Michroma", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
    "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "ArchivoVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "SF Mono",
    "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Space, a 4px scale. */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;

  --radius: 10px;
  --radius-sm: 7px;
}

/* Text-bearing gradient surfaces stop at royal on purpose: white on --bright
   is 3.58:1 and on --cyan is 1.81:1, so a ramp running to cyan makes the
   right-hand half of every button illegible. */
.brand-gradient {
  background-image: linear-gradient(100deg, var(--deep) 0%, var(--royal) 100%);
}