/* ── Unclouded.ai design tokens ────────────────────────────────────────────

   A dark-first console palette: a near-black slate field the whole site lives
   on, one electric cyan for action, and three placement colours that say where
   a workload runs — green for your network, blue for managed infrastructure,
   amber for the cloud.

   ┌─────────────────────────────────────────────────────────────────────────┐
   │ THE RULE THAT SHAPES THIS FILE                                          │
   │                                                                         │
   │ No gradient, image, pseudo-element or translucent layer may sit behind   │
   │ text. Every text/background pair on this site resolves to two flat hex   │
   │ values.                                                                 │
   │                                                                         │
   │ This is not only a taste decision. axe reports "background could not be  │
   │ determined" against gradients, translucency and pseudo-elements and      │
   │ files the result as *incomplete* — a finding no tool can decide and no   │
   │ gate counts. Real contrast failures hide in exactly that blind spot.     │
   │                                                                         │
   │ It matters more on a dark site, not less. The temptation to reach for a  │
   │ glow, a scanline overlay or a translucent glass panel is constant, and   │
   │ every one of them creates that blind spot. The terminal look here is     │
   │ built from flat fills, hairline borders and mono type instead.           │
   │                                                                         │
   │ Gradients are allowed where no text sits on them: the brand mark and     │
   │ the short accent rules under the eyebrows.                               │
   └─────────────────────────────────────────────────────────────────────────┘

   Every ratio below was computed, not estimated. Re-run
   specs/unclouded/site-plan/../../../scratchpad/contrast.py after changing
   any value. Bars: 4.5:1 body text, 3:1 large text and UI component
   boundaries.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Declared so native controls, scrollbars and the <select> arrow render
     dark without being restyled. Restyling a select needs `appearance: none`
     plus a background-image, which is exactly the undecidable axe result the
     rule above exists to avoid. */
  color-scheme: dark;

  /* ── Fields ─────────────────────────────────────────────────────────────
     Five steps, darkest to lightest. Every one of them is a flat fill. */
  --bg:        #0a0e14;   /* the page */
  --bg-soft:   #0e141d;   /* alternating band */
  --surface:   #131b26;   /* card */
  --surface-2: #1a2431;   /* raised panel, table head, form control */
  --raised:    #212d3c;   /* hover, nav pill */

  /* ── Borders ────────────────────────────────────────────────────────────
     The first two are decorative separators. They are never the visible
     boundary of a control, so the 3:1 non-text bar does not apply to them. */
  --border:        #1f2a38;
  --border-strong: #33455a;

  /* The visible boundary of a form control. WCAG 1.4.11 wants 3:1 against
     the adjacent surface, and the decorative borders above are nowhere near
     it. This value clears the bar on every field above: 4.05:1 on --surface,
     3.67:1 on --surface-2, 4.53:1 on --bg, 3.27:1 on --raised. */
  --border-input:  #647d96;

  /* ── Type ───────────────────────────────────────────────────────────────
     Solid hex rather than rgba(): the flat-background rule applies to the
     foreground too, so nothing on this site needs compositing to evaluate. */
  --text:      #e9eff7;   /* 16.7:1 on --bg, 12.1:1 on --raised */
  --text-soft: #bccadb;   /* 11.6:1 on --bg,  8.4:1 on --raised */
  --muted:     #93a5ba;   /*  7.7:1 on --bg,  5.5:1 on --raised */

  /* ── Signal cyan — action, links, focus, the brand ──────────────────── */
  --accent:      #3ddbf0;   /* 11.6:1 on --bg,  8.4:1 on --raised */
  --accent-dim:  #22b8cf;   /*  8.1:1 on --bg,  5.9:1 on --raised */
  --accent-soft: #0b2028;   /* tinted panel — text on it checked below */
  --accent-line: #1d5766;   /* decorative only */

  /* ── Placement — where a workload runs ──────────────────────────────────
     Always paired with a text label. Colour is redundant reinforcement here,
     never the only carrier of the meaning (WCAG 1.4.1). */
  --local:        #5fe3a1;   /* your network      — 12.0:1 on --bg */
  --local-soft:   #0a2118;
  --local-line:   #1e5c41;
  --managed:      #7fb4ff;   /* managed private   —  9.1:1 on --bg */
  --managed-soft: #101d33;
  --managed-line: #2a4a7a;
  --cloud:        #f0b757;   /* external cloud    — 10.7:1 on --bg */
  --cloud-soft:   #241d0c;
  --cloud-line:   #6b5220;

  /* ── Alert ──────────────────────────────────────────────────────────── */
  --alert:      #ff8f7a;   /* 8.7:1 on --bg */
  --alert-soft: #2a1614;
  --alert-line: #7a3a2e;

  /* ── Text that sits ON a signal colour ──────────────────────────────────
     One near-black works against all of them: 11.3:1 on cyan, 11.6:1 on
     green, 8.9:1 on blue, 10.4:1 on amber, 8.5:1 on the alert coral. */
  --on-signal: #06131a;

  /* ── Focus ──────────────────────────────────────────────────────────────
     Warm, so it never reads as one of the placement colours, and 13.4:1 on
     the page field. */
  --focus: #ffd166;

  /* ── Shape + rhythm ─────────────────────────────────────────────────────
     Small radii. Racks and rack units are square; so is this. */
  --radius:    6px;
  --radius-sm: 3px;
  --radius-lg: 12px;
  --container: 1180px;
  --narrow:    760px;

  /* On a near-black field a drop shadow is nearly invisible, so elevation is
     carried by the field steps above and by borders. These stay for the two
     places a lifted edge still reads. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .35);

  /* Inter runs everything including the headings — tight tracking at display
     sizes reads as a product built by engineers rather than as a brochure.
     JetBrains Mono carries the eyebrows, placement tags, pipeline steps and
     data labels, and it is what makes the site read as technical. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}