/* ===========================================================================
   Total Stack Solutions — brand tokens.
   Lifted from totalstacksolutions.com so the demo looks like the company that
   built it rather than like a lab tool.

   FONTS, deliberately not loaded from Google.

   The site pulls Sora and Inter from fonts.googleapis.com. This page does not,
   for a reason that is the whole pitch: it runs on a VM whose selling point is
   "nothing ever leaves the building — 0 external AI calls". A demo that opens a
   connection to Google on load contradicts the sentence it is demonstrating,
   and in an air-gapped install it does not render at all — the fonts silently
   fall back and the page looks broken to whoever is being shown it.

   The stacks below are identical to the site's, so a machine that already has
   Sora and Inter installed matches exactly and everything else falls to Segoe
   UI, which is what the site's own fallback does.

   To match the site exactly on any machine, self-host instead — download the
   woff2 files once, drop them next to this file, and uncomment:

       @font-face { font-family: "Sora";  src: url("Sora.woff2") format("woff2");
                    font-weight: 600 700; font-display: swap; }
       @font-face { font-family: "Inter"; src: url("Inter.woff2") format("woff2");
                    font-weight: 400 600; font-display: swap; }
   =========================================================================== */

:root {
  --navy:       #0b1220;
  --navy-2:     #111a2e;
  --navy-3:     #182238;
  --ink:        #1e293b;
  --muted:      #5b6b84;
  --muted-dark: #94a3b8;
  --cyan:       #22d3ee;
  --violet:     #8b5cf6;
  --grad:       linear-gradient(135deg, #22d3ee 0%, #8b5cf6 100%);
  --bg-light:   #f7f9fc;
  --bg-gray:    #eef2f7;
  --white:      #ffffff;
  --line:       #e2e8f0;
  --line-dark:  rgba(148, 163, 184, 0.18);
  --radius:     14px;
  --shadow:     0 10px 30px rgba(11, 18, 32, 0.08);
  --shadow-lg:  0 20px 50px rgba(11, 18, 32, 0.16);
  --font-head:  "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:  "Inter", "Segoe UI", system-ui, sans-serif;

  /* Semantic colours for the pipeline outcomes. Green and amber rather than
     green and red: a handoff is the system working correctly, and colouring it
     like an error teaches the opposite of the thing being demonstrated. */
  --ok:      #0f9960;
  --ok-bg:   #eaf7f0;
  --ok-line: #b7e4cd;
  --stop:      #b45309;
  --stop-bg:   #fef6ec;
  --stop-line: #f5d9ae;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-light);
  color: var(--ink);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark { font-family: var(--font-head); letter-spacing: -0.02em; }

/* --------------------------------------------------------------- wordmark --- */

.wordmark {
  display: inline-flex; flex-direction: column; line-height: 1.02;
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
}
.wordmark .a { color: var(--white); }
.wordmark .b {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wordmark.on-light .a { color: var(--ink); }

/* ------------------------------------------------------------------ chrome --- */

.eyebrow {
  font-family: var(--font-head); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}
.eyebrow.on-light { color: var(--violet); }

.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 500; color: var(--muted-dark);
  border: 1px solid var(--line-dark); border-radius: 999px;
  padding: .25rem .7rem; background: rgba(255, 255, 255, .04);
}
.badge .dot {
  width: .45rem; height: .45rem; border-radius: 999px; background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

button, .btn {
  font: 500 .9rem/1 var(--font-body); cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); padding: .6rem 1rem;
  transition: border-color .15s, transform .04s;
}
button:hover:not(:disabled) { border-color: var(--violet); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }

button.primary {
  background: var(--grad); color: #04121a; border: none; font-weight: 600;
  box-shadow: 0 6px 18px rgba(139, 92, 246, .22);
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); }

select, input, textarea {
  font: inherit; font-size: .92rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem;
  width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--violet); outline-offset: -1px;
}

label {
  display: block; font-family: var(--font-head); font-size: .7rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 1rem 0 .35rem;
}

code {
  font: 13px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--bg-gray); border-radius: 5px; padding: .08em .38em;
}