/*
 * The one token set, shared by every Aegis surface.
 *
 * Three surfaces render Aegis - the workbench SPA, the MkDocs spec site, and the
 * public product site - and each grew its own palette. This file is the seam: all
 * three load it, so the unified visual design is an edit here rather than a hunt
 * through three stylesheets that have quietly diverged.
 *
 * It defines values only. Component styling stays with the surface that owns it,
 * because the three have genuinely different components and always will.
 *
 * ## Where the values come from
 *
 * The environments dashboard is the reference design, and these are its values
 * rather than an interpretation of them - `--bg`, `--panel`, `--accent` and the
 * status triad are lifted from its own stylesheet. It is the right reference
 * because it is the one surface a developer already sees every day, and because
 * two surfaces agreeing beats three surfaces each being defensible alone.
 *
 * Dark is the primary scheme, for the same reason: that is what the reference is.
 * The light scheme is a counterpart at the same hues, not a second design - the
 * spec site offers a toggle and a reader who uses it should not change product.
 *
 * Status is never carried by colour alone - every state has a glyph or a word
 * beside it. Colour is the fastest signal for people who can use it and no signal
 * at all for people who cannot.
 */

:root {
  color-scheme: dark light;

  /* --- surfaces, darkest to lightest. `sunken` is the page, `surface` a panel,
     `raised` the header of one, `raised-2` a control inside it. */
  --surface-sunken: #07060b;
  --surface: #0d0b13;
  --surface-raised: #13111c;
  --surface-raised-2: #1a1724;

  /* Two weights of rule. `line` separates panels from the page; `line-strong`
     outlines something you can click, which needs to be findable. */
  --line: #1b1826;
  --line-strong: #282334;

  --ink: #ececf1;
  --ink-muted: #a3a0b0;
  --ink-faint: #7b7788;

  /* The brand pair. Every gradient in the design runs between these two and in
     this order, which is what makes an accent stripe recognisable across surfaces. */
  --accent: #a878ff;
  --accent-2: #6633ee;
  --accent-ink: #ffffff;
  --accent-soft: rgb(168 120 255 / 10%);
  --accent-line: rgb(168 120 255 / 26%);
  --accent-2-soft: rgb(102 51 238 / 14%);
  --accent-2-line: rgb(102 51 238 / 38%);

  --ok: #3fce74;
  --ok-soft: rgb(63 206 116 / 10%);
  --warn: #e3a13a;
  --warn-soft: rgb(227 161 58 / 10%);
  --bad: #f4635e;
  --bad-soft: rgb(244 99 94 / 10%);

  /* Node palette - the exact hex values from the reference's colors.js
     TYPE_COLORS (PROJECT_DOCUMENTATION.txt section 7's fixed atlas). Node
     blocks are filled with these directly (see GraphNodeCard), same value in
     both themes since the reference has no light/dark variant of its own -
     these are meant to read as bright/saturated against white node text,
     not as a subtle accent tuned per-theme. */
  --n-businessflow: #4338ca;
  --n-service: #2563eb;
  --n-uipod: #0284c7;
  --n-apipod: #16a34a;
  --n-consumerpod: #0d9488;
  /* jobPod has no counterpart in the reference's own atlas - it's a real 4th
     program (the migration/db-script runner) the reference's schema never gave
     a type either. Picked a hue none of the other types use. */
  --n-jobpod: #65a30d;
  --n-kafkatopic: #9333ea;
  --n-dbtable: #d97706;
  --n-sourcefile: #6b7280;
  --n-infra: #334155;
  --n-k8scluster: #0e7490;
  --n-k8snamespace: #22d3ee;
  --n-k8sdeployment: #7c3aed;
  --n-dbinstance: #92400e;
  --n-kafkabroker: #581c87;

  /* --- geometry. A panel is 12px, a control 8px, a pill fully round. The
     reference uses exactly three and mixing in a fourth is what makes a page
     look assembled rather than designed. */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --radius-pill: 999px;
  --gap: 14px;

  /* The page is a fixed-width column, not a full-bleed fluid layout. */
  --content-max: 1220px;
  --page-pad: 32px;
  --topbar-h: 62px;
  /* The right-hand drawer's width. Shared, because the surface behind it reserves
     exactly this much room rather than being covered - see `.has-drawer`. */
  --drawer-w: 26rem;

  /* No shadows anywhere, and no gradient either. A panel is one flat colour against
     the sunken page, separated by its rule - the vertical fade it used to carry was
     depth that cost legibility, because text at the top of a panel sat on a
     different value than text at the bottom of one.

     Restated in every scheme block below, and it has to be: a `var()` inside a
     custom property is substituted where that property is declared, so a single
     definition here would freeze every panel at whichever scheme `<html>` resolved.
     On the spec site that is never the one Material set, because Material puts
     `data-md-color-scheme` on `<body>` - the tiles came out white on a
     light-preferring machine. */
  --shadow: none;
  --panel-bg: var(--surface);
  --accent-grad: linear-gradient(180deg, var(--accent), var(--accent-2));

  /* One bloom, pushed out to the edges: the page reads black where the content is
     and takes its colour only at the margins. The brand arrives as light on a dark
     room rather than as paint on the surfaces. */
  --page-glow: radial-gradient(125% 125% at 50% 8%, transparent 42%, rgb(102 51 238 / 34%) 100%);

  /* --- the type scale.
   *
   * Twelve steps, each with one job. Before this there were twenty sizes across
   * the SPA including five half-pixel values - 11.5, 12.5, 13.5, 14.5, 17.5 -
   * which is what accretion looks like: somebody nudged a number rather than
   * picking a step, and the next person nudged it again.
   *
   * One hierarchy error came out of the audit and is fixed here: `.kpi .value`
   * was 28px against a page `h1` of 27px, so a counter outranked the title of
   * the page it sat on. `stat` is now clearly below `page`.
   *
   * Sizes are px rather than rem on purpose. The body is 15px from the reference
   * design and every panel is tuned to it; a rem scale would make the whole
   * workbench re-flow with the browser's font setting, which is a different
   * decision from the one this scale is making. */
  --fs-micro: 10px;    /* counters inside a node, a caret */
  --fs-label: 11px;    /* uppercase section labels */
  --fs-meta: 12px;     /* chips, code, dense meta */
  --fs-small: 13px;    /* secondary prose */
  --fs-control: 14px;  /* buttons, inputs, tabs */
  --fs-body: 15px;     /* body text - the anchor */
  --fs-lead: 16px;     /* the wordmark, a panel's own title */
  --fs-title: 17px;    /* a section heading */
  --fs-head: 22px;     /* a heading on a narrow viewport */
  --fs-stat: 24px;     /* a counter's value */
  --fs-page: 27px;     /* a page heading */
  --fs-hero: 34px;     /* the home page's one big line */

  /* No webfont anywhere. The site has to render on a machine with no outbound
     network, and a wordmark that reflows on a cold cache is worse than one that
     never moves. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/*
 * The light counterpart.
 *
 * Same hues, same geometry, inverted surfaces - and the accents are darkened,
 * because #a878ff on white is 2.4:1 and would fail on every link it touched.
 *
 * ## Which surface asks in which way
 *
 * Each surface has its own switch, and this block answers to both:
 *
 *   `data-theme`            the SPA's toggle, always set
 *   `data-md-color-scheme`  Material's, always set - `default` is its light scheme
 *
 * Dark is the default on both, because the palette above is `:root` and because the
 * spec site opens on the first entry of its MkDocs palette, which is `slate`. That
 * is what keeps the two in step on any machine: neither reads
 * `prefers-color-scheme` to decide, so neither can disagree with the other. The
 * split this replaced was a dark workbench beside a light spec on the same screen.
 *
 * The media query at the end is the third surface, the product site, which has no
 * toggle and therefore no attribute to read.
 */
[data-theme='light'],
[data-md-color-scheme='default'] {
  --surface-sunken: #fafafc;
  --surface: #ffffff;
  --surface-raised: #fdfdff;
  --surface-raised-2: #f1eff6;

  --line: #e8e6ef;
  --line-strong: #cfccd9;

  --ink: #0f0e14;
  --ink-muted: #4d4a58;
  --ink-faint: #635f70;

  --accent: #5a2ad6;
  --accent-2: #6633ee;
  --accent-ink: #ffffff;
  --accent-soft: rgb(90 42 214 / 7%);
  --accent-line: rgb(90 42 214 / 24%);
  --accent-2-soft: rgb(102 51 238 / 7%);
  --accent-2-line: rgb(102 51 238 / 28%);

  --ok: #17803f;
  --ok-soft: rgb(23 128 63 / 9%);
  --warn: #8a5a08;
  --warn-soft: rgb(138 90 8 / 10%);
  --bad: #c1372f;
  --bad-soft: rgb(193 55 47 / 9%);

  --panel-bg: var(--surface);
  --page-glow: radial-gradient(125% 125% at 50% 8%, transparent 52%, rgb(102 51 238 / 9%) 100%);
}

/*
 * Dark, restated - and it has to be restated rather than inherited.
 *
 * Material puts `data-md-color-scheme` on `<body>`, not on `<html>`, so on a
 * light-preferring machine the media query below matches `<html>` and hands the
 * whole document light values. A reader who then switches the spec to dark would
 * get Material's dark components over this file's light tokens. This block is what
 * that switch lands on.
 */
[data-md-color-scheme='slate'] {
  --surface-sunken: #07060b;
  --surface: #0d0b13;
  --surface-raised: #13111c;
  --surface-raised-2: #1a1724;

  --line: #1b1826;
  --line-strong: #282334;

  --ink: #ececf1;
  --ink-muted: #a3a0b0;
  --ink-faint: #7b7788;

  --accent: #a878ff;
  --accent-2: #6633ee;
  --accent-ink: #ffffff;
  --accent-soft: rgb(168 120 255 / 10%);
  --accent-line: rgb(168 120 255 / 26%);
  --accent-2-soft: rgb(102 51 238 / 14%);
  --accent-2-line: rgb(102 51 238 / 38%);

  --ok: #3fce74;
  --ok-soft: rgb(63 206 116 / 10%);
  --warn: #e3a13a;
  --warn-soft: rgb(227 161 58 / 10%);
  --bad: #f4635e;
  --bad-soft: rgb(244 99 94 / 10%);

  --panel-bg: var(--surface);
  --page-glow: radial-gradient(125% 125% at 50% 8%, transparent 42%, rgb(102 51 238 / 34%) 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not([data-md-color-scheme]) {
    --surface-sunken: #fafafc;
    --surface: #ffffff;
    --surface-raised: #fdfdff;
    --surface-raised-2: #f1eff6;

    --line: #e8e6ef;
    --line-strong: #cfccd9;

    --ink: #0f0e14;
    --ink-muted: #4d4a58;
    --ink-faint: #635f70;

    --accent: #5a2ad6;
    --accent-2: #6633ee;
    --accent-ink: #ffffff;
    --accent-soft: rgb(90 42 214 / 7%);
    --accent-line: rgb(90 42 214 / 24%);
    --accent-2-soft: rgb(102 51 238 / 7%);
    --accent-2-line: rgb(102 51 238 / 28%);

    --ok: #17803f;
    --ok-soft: rgb(23 128 63 / 9%);
    --warn: #8a5a08;
    --warn-soft: rgb(138 90 8 / 10%);
    --bad: #c1372f;
    --bad-soft: rgb(193 55 47 / 9%);

    --panel-bg: var(--surface);
    --page-glow:
      radial-gradient(900px 420px at 12% -12%, rgb(90 42 214 / 6%), transparent 60%),
      radial-gradient(900px 420px at 88% -12%, rgb(102 51 238 / 5%), transparent 60%);
  }
}