/* SHELEG Design — Maquette token layer (enterprise data infrastructure sold to
   an architecture buyer).
   Copy verbatim; consume only var(--…) in components.

   The page is a dark table with a built object on it: an axonometric model in
   cream, its blocks labelled in mono, lit from the upper left. The reader is
   meant to take the system apart with their eyes before they evaluate its cost.

   Extracted from https://zilliz.com/ on 2026-08-09 by reading its live computed
   styles; ratios computed by importing test/validate_palette.py.

   The reference needed no CONTRAST correction — every measured pair clears its
   floor. Its status palette is a different matter: there isn't one, so the four
   status tokens below are derived rather than extracted, and they say so at the
   declaration. */

:root {
  color-scheme: dark;

  /* ---- The table -------------------------------------------------------- */
  --bg: #151515;
  --surface: #1b1b1b; /* a panel on the table */
  --surface-2: #1d1d1d; /* a raised panel */
  --surface-sunken: #131313; /* a well cut into it */

  /* ---- Ink: CREAM, not white ------------------------------------------- */
  /* This is the pack's least obvious rule and the easiest to undo by accident.
     The ink is the same cream the model is built from, so type and object read
     as one material lit by one lamp. Swap in #ffffff and the page splits into a
     warm object on a cold page. */
  --ink: #fff9f4; /* 17.49:1 on --bg */
  --ink-soft: #b3b5c1; /* 8.95:1 — secondary copy, comfortably AA */
  --ink-faint: #8a8f98; /* 5.62:1 on --bg — captions and leader lines */
  --on-ink: #151515;

  /* ---- Lines ------------------------------------------------------------ */
  --line: #2b2b2b; /* THE hairline: panel edges, table rules */
  --line-strong: #3a3a3a;

  /* ---- Accent: pale aqua, and it works as text -------------------------- */
  /* Unusual among these packs: 15.49:1 on the field, so the aqua may set a
     display word, a label or a link without a second token. Under it, black —
     17.81:1 — never the cream, which drops to 1.1:1 and disappears. */
  --accent: #97fdff;
  --accent-deep: #5fd9dd; /* hover on an aqua fill */
  --on-accent: #000000; /* 17.81:1 — the one place pure black is correct */

  /* ---- The model -------------------------------------------------------- */
  /* Three faces of one cream solid under a single upper-left light. They are
     tokens rather than filter values because an axonometric drawing has no
     shading model — the faces are flat fills and their relationship IS the
     lighting. */
  --model-top: #fff9f4; /* the lit top face — 17.49:1 on --bg */
  --model-face: #fff3d6; /* the front face, warmer — 16.56:1 on --bg */
  --model-side: #e8ddc8; /* the side in shade */
  /* Text ON a cream face. `--ink` is the SAME hex as `--model-top` -- that is
     the pack's central rule, type and object built from one cream.
     --ink on --model-top is 1.00:1, so a label placed there is invisible.
     The Components table
     prescribed exactly that until 1.46.0 and nothing computed it. The value is
     the field's own. */
  --on-model: #151515; /* 17.49:1 on --model-top — the label on a cream face */
  /* @role drawn-on: --model-top, --model-face, --model-side — the model's
     own outline, and it is the SAME hex as --bg on purpose: the cream solids are
     separated by the table showing between them, which is why the model reads as
     cut paper rather than as an SVG. It is drawn on the model's own faces and
     never on the field, where it would be 1.00:1. */
  --model-line: #151515;
  --leader: #8a8f98; /* the dotted leader from a block to its label */

  /* ---- Elevation: ONE shadow, and its direction is not adjustable ------- */
  /* Displaced on both axes. That is what makes a block sit on the table under a
     raking light instead of floating above a page. Every block is lit from the
     same upper-left source; change the offsets on one and the model comes
     apart. */
  --shadow-block: 12px 24px 24px rgba(0, 0, 0, 0.25);
  /* Below 768px the displacement shortens: 24px on a 320px-wide drawing reads as
     a printing error rather than as a light source. Same direction, same alpha. */
  --shadow-block-sm: 6px 12px 12px rgba(0, 0, 0, 0.25);

  /* ---- Status: A PACK DECISION, not a measurement ---------------------- */
  /* The reference's homepage exposes no status palette at all — its whole
     surface is cream, aqua and greys. These four are therefore derived for this
     pack rather than read off the page, and this comment is the pack refusing to
     let that pass as extracted.

     They are chosen to sit in the pack's own world (bright enough to hold on a
     #151515 table) and separated as far as the hue wheel allows from --accent
     and from each other. The green/red pair still collapses to 6.4 under
     deuteranopia — as it does in every palette, because green and red are the
     one pair no hex can separate for a deuteranope. That is what the pack's
     'never by colour alone' declaration is for; it is the correct answer here,
     not a way around the check. */
  --good: #3fcf7f;
  --warning: #ffb020;
  --danger: #ff5c5c;
  --info: #97fdff; /* the accent, deliberately: informational is not a status */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius: 8px; /* panels, cards, the CLI well */
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 36px; /* every action in this pack is a pill */

  /* ---- Spacing and the page -------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --page-max: 80rem;
  --hero-min-h: 100dvh; /* never 100vh */

  /* ---- Type ------------------------------------------------------------- */
  /* Geist for the argument, Geist Mono for anything the model says. The split
     is strict: prose is the grotesque, and every block label, leader caption,
     CLI line and dimension is mono. Both are SIL OFL — no substitution trap. */
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --t-display: 4.125rem; /* 66px */
  --lh-display: 1.06;
  --track-display: -0.02em;
  --t-h2: 2.5rem;
  --lh-h2: 1.2;
  --t-h3: 1.75rem;
  --lh-h3: 1.25;
  --t-lede: 1.375rem;
  --lh-lede: 1.273;
  --t-body: 1rem;
  --lh-body: 1.6;
  --t-sm: 0.875rem;
  --lh-sm: 1.5;
  --t-label: 0.8125rem; /* the block label, mono */
  --lh-label: 1.4;
  --track-label: 0.02em;

  --weight-display: 700;
  --weight-body: 400;

  /* ---- Motion: short, and it never moves the model --------------------- */
  /* The model is a drawing. Parallaxing it, rotating it or exploding it on
     scroll turns a measurable object into a toy — see the pack's Bans. Motion
     here belongs to controls and to section entry, nothing else. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.28s;
  --dur-slow: 0.32s;

  background-color: var(--bg);
  color: var(--ink);
}

/* The reference ships four reduced-motion blocks — unusually good for this
   category, and this pack requires the same posture. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
    --dur-slow: 0s;
  }
}

/* ── components ── */

/* Everything below consumes var(--…) only. Colour never appears as a literal:
   the token layer above is the whole palette, and a value with no token is a gap
   in the pack rather than something to inline here. Geometry stays numeric.
   The rule that governs every rule below: the model is a drawing on a dark
   table. It never moves, its light comes from one upper-left source, and the
   surface family stays within a few percent of the field. */

.mq-heading { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--track-display); color: var(--ink); text-wrap: balance; }
.mq-heading--1 { font-size: var(--t-display); line-height: var(--lh-display); }
.mq-heading--2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
.mq-heading--3 { font-size: var(--t-h3); line-height: var(--lh-h3); }

.mq-rule { height: 0; margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--line); }
.mq-rule--strong { border-top-color: var(--line-strong); }

.mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-display);
  font-weight: var(--weight-body); line-height: 1; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mq-btn--sm { padding: 6px var(--space-4); font-size: var(--t-sm); }
.mq-btn--md { padding: 8px var(--space-6); font-size: var(--t-sm); }
.mq-btn--lg { padding: 12px var(--space-8); font-size: var(--t-body); }
.mq-btn--primary { background-color: var(--accent); color: var(--on-accent); }
.mq-btn--primary:hover:not(:disabled) { background-color: var(--accent-deep); }
.mq-btn--secondary { background-color: var(--surface-2); color: var(--ink); }
.mq-btn--secondary:hover:not(:disabled) { background-color: var(--surface); }
.mq-btn--ghost { background-color: transparent; color: var(--ink-soft); }
.mq-btn--ghost:hover:not(:disabled) { color: var(--ink); }
.mq-btn:active:not(:disabled) { transform: translateY(1px); }
.mq-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mq-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mq-card { display: block; background-color: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-6); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease); }
.mq-card:hover { border-color: var(--line-strong); }
.mq-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.mq-card__title { margin: 0; font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--weight-display); }
.mq-card__meta { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-soft); }
.mq-card__body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }

.mq-chip { display: inline-flex; align-items: center; gap: var(--space-2); background-color: var(--surface-2);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--ink); }
.mq-chip::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background-color: var(--good); }
.mq-chip--accent::before { background-color: var(--accent); }
.mq-chip--selected { background-color: var(--accent); color: var(--on-accent); }

.mq-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.mq-stat__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--ink-soft); }
.mq-stat__value { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: var(--weight-display); color: var(--ink); }
.mq-stat__source { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-faint); }

/* The model. Flat faces, one light, and it does not move. */
.mq-block { position: relative; display: inline-block; filter: drop-shadow(var(--shadow-block)); }
.mq-block__top { display: block; background-color: var(--model-top); border: 1px solid var(--model-line); }
.mq-block__face { display: block; background-color: var(--model-face); border: 1px solid var(--model-line); }
.mq-block__side { display: block; background-color: var(--model-side); border: 1px solid var(--model-line); }
.mq-block__label { position: absolute; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--track-label); color: var(--on-ink); }
.mq-block--t1 { z-index: 1; }
.mq-block--t2 { z-index: 2; }
.mq-block--t3 { z-index: 3; }

.mq-leader { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); }
.mq-leader__line { display: block; width: 1px; height: 28px; border-left: 1px dotted var(--leader); }
.mq-leader--left .mq-leader__line, .mq-leader--right .mq-leader__line { width: 28px; height: 1px; border-left: 0; border-top: 1px dotted var(--leader); }
.mq-leader__chip { background-color: var(--model-top); color: var(--on-ink); border-radius: var(--radius-sm);
  padding: 4px var(--space-3); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); }

.mq-pill { display: inline-flex; align-items: center; gap: var(--space-2); background-color: var(--accent);
  color: var(--on-accent); border: 0; border-radius: var(--radius-pill); padding: 8px var(--space-6);
  font-family: var(--font-display); font-size: var(--t-sm); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.mq-pill:hover:not(:disabled) { background-color: var(--accent-deep); }
.mq-pill:active:not(:disabled) { transform: translateY(1px); }
.mq-pill:disabled { opacity: 0.45; cursor: not-allowed; }
/* Aqua on aqua is nothing — the focus ring here is the ink. */
.mq-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mq-cli { display: flex; align-items: center; gap: var(--space-3); background-color: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--t-sm); }
.mq-cli__label { color: var(--ink-soft); }
.mq-cli__cmd { color: var(--ink); flex: 1 1 auto; }
.mq-cli__copy { border: 0; background: none; font: inherit; color: var(--ink-soft); cursor: pointer;
  transition: color var(--dur-fast) var(--ease); }
.mq-cli__copy:hover { color: var(--accent); }

/* The offset shortens on small screens: 24px of displacement on a 320px drawing
   reads as a printing error. Labels never scale. */
/* SELF — the drop-shadow is a property of .mq-block, which is the element that would
   establish the container. Wrapping every model block to let it query itself would
   change a consumer's markup, which is not the kit's business. */
@media (max-width: 768px) {
  .mq-block { filter: drop-shadow(var(--shadow-block-sm)); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-btn:active:not(:disabled), .mq-pill:active:not(:disabled) { transform: none; }
}