/*
 * xircuit-tokens.css — the single source of truth for colour, depth and rhythm.
 *
 * Everything else in the app derives from here. If you are about to write a hex
 * literal in a .razor file, add a token instead.
 *
 * Theme resolution order (all three are required, and the attribute selectors
 * must win in BOTH directions so the in-app toggle can override the OS):
 *   1. :root                              → light defaults
 *   2. @media (prefers-color-scheme:dark) → OS preference
 *   3. :root[data-theme="dark"|"light"]   → explicit user choice
 *
 * --org is published at runtime by MainLayout from OrgKindTheme, so the whole
 * cascade re-tints when the active organisation changes.
 */

:root {
  /* ── Organisation accent (runtime) ───────────────────────────────────── */
  --org: #285b6e;              /* brand teal — the no-active-org fallback */
  --org-ink: #ffffff;          /* derived: measured against the org ground */
  --org-viz: var(--org);       /* data-viz accent; dark mode lifts it */

  /* ── Ground ──────────────────────────────────────────────────────────── */
  --base:      #eaf1f3;
  --base-deep: #dbe7ea;

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --ink:   #0c1f27;
  /* Quiet inks are darkened from #3d5c66/#74909a. Measured over a floored glass
     surface on the dense part of the wash they were 2.72:1 and 1.28:1; these
     reach 6.72:1 and 5.11:1 there, and improve on opaque surfaces too. */
  --ink-2: #24404a;
  --ink-3: #33525d;

  /* ── Glass ───────────────────────────────────────────────────────────── */
  /*
   * The luminance floor. --glass-a/b add WHITE over whatever the ground is, so
   * without a floor a surface sitting on the dense part of the organisation wash
   * lands at a mid-tone and no ink can reach AA against it — measured, the
   * brightest ink token topped out at 4.01:1 and the quiet ones at 1.25:1.
   * Compositing the base colour underneath keeps every surface inside a
   * predictable luminance band whatever drifts behind it.
   *
   * Declared once: it resolves --base lazily, so each theme block below gets its
   * own floor automatically (dark tints down, light tints up).
   */
  --glass-floor:    color-mix(in oklab, var(--base) 55%, transparent);
  --glass-a:        rgba(255, 255, 255, .26);
  --glass-b:        rgba(255, 255, 255, .08);
  --glass-edge:     rgba(255, 255, 255, .85);
  --glass-edge-dim: rgba(255, 255, 255, .18);
  --glass-blur:     blur(34px) saturate(190%);
  --glass-shadow:
    0 14px 40px -14px rgba(6, 26, 34, .32),
    0 2px 8px -2px rgba(6, 26, 34, .14);

  /* ── Semantic state — deliberately independent of the accent ─────────── */
  --good: #00a651;
  --warn: #d9a441;
  --crit: #e0455f;

  /* ── Data visualisation ──────────────────────────────────────────────── */
  --grid-line: .12;   /* chart grid-line opacity */
  --bar-floor: .40;   /* minimum series opacity — legibility floor */

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 26px;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: 'Quicksand', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(.76rem, .73rem + .15vw, .83rem);
  --step-0:  clamp(.92rem, .89rem + .18vw, 1rem);
  --step-1:  clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
  --step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --shell-max: 2400px;   /* NOT 1920 — wide monitors get columns, not margin */
  --gutter: clamp(1rem, 2.5vw, 2rem);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: 140ms;
  --slow: 320ms;
}

/* ── Dark: OS preference ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --base:      #0a1519;
    --base-deep: #050d11;

    --ink:   #eaf3f5;
    /* Lifted from #a6c0c8/#6e8b94 — see the light block for the measurements. */
    --ink-2: #c3d8de;
    --ink-3: #a9c3cb;

    --glass-a:        rgba(255, 255, 255, .13);
    --glass-b:        rgba(255, 255, 255, .03);
    --glass-edge:     rgba(255, 255, 255, .34);
    --glass-edge-dim: rgba(255, 255, 255, .06);
    --glass-shadow:
      0 16px 44px -14px rgba(0, 0, 0, .66),
      0 2px 8px -2px rgba(0, 0, 0, .40);

    /* A deepened org hex is near-invisible as a chart series on a near-black
       ground. Lift it toward white for data only — never for the app bar,
       which needs the full-strength brand colour. */
    --org-viz: color-mix(in oklab, var(--org) 58%, #eafff4 42%);
    --grid-line: .22;
    --bar-floor: .58;
  }
}

/* ── Dark: explicit ────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --base:      #0a1519;
  --base-deep: #050d11;

  --ink:   #eaf3f5;
  /* Lifted from #a6c0c8/#6e8b94 — see the light block for the measurements. */
  --ink-2: #c3d8de;
  --ink-3: #a9c3cb;

  --glass-a:        rgba(255, 255, 255, .13);
  --glass-b:        rgba(255, 255, 255, .03);
  --glass-edge:     rgba(255, 255, 255, .34);
  --glass-edge-dim: rgba(255, 255, 255, .06);
  --glass-shadow:
    0 16px 44px -14px rgba(0, 0, 0, .66),
    0 2px 8px -2px rgba(0, 0, 0, .40);

  --org-viz: color-mix(in oklab, var(--org) 58%, #eafff4 42%);
  --grid-line: .22;
  --bar-floor: .58;
}

/* ── Light: explicit (must undo the media query) ───────────────────────── */
:root[data-theme="light"] {
  --base:      #eaf1f3;
  --base-deep: #dbe7ea;

  --ink:   #0c1f27;
  /* Quiet inks are darkened from #3d5c66/#74909a. Measured over a floored glass
     surface on the dense part of the wash they were 2.72:1 and 1.28:1; these
     reach 6.72:1 and 5.11:1 there, and improve on opaque surfaces too. */
  --ink-2: #24404a;
  --ink-3: #33525d;

  --glass-a:        rgba(255, 255, 255, .26);
  --glass-b:        rgba(255, 255, 255, .08);
  --glass-edge:     rgba(255, 255, 255, .85);
  --glass-edge-dim: rgba(255, 255, 255, .18);
  --glass-shadow:
    0 14px 40px -14px rgba(6, 26, 34, .32),
    0 2px 8px -2px rgba(6, 26, 34, .14);

  --org-viz: var(--org);
  --grid-line: .12;
  --bar-floor: .40;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

/*
 * The page content column.
 *
 * Replaces MudContainer MaxWidth.ExtraLarge, which hard-capped every page —
 * management screens included — at 1920px. Past that width a 2560px monitor
 * gained margin instead of content, which is the opposite of what an operator
 * console wants. --shell-max is deliberately generous; pages that genuinely
 * read better narrow (long-form text, forms) opt into .x-measure instead of
 * the whole app paying for them.
 */
.x-content {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(1rem, 2vw, 1.75rem);
}

/* Reading measure for prose-heavy pages. ~75ch is the comfortable ceiling. */
.x-measure { max-width: 75ch; }

/*
 * Bottom clearance for the mobile tab bar, including the device safe area.
 * Applied to the content column, not the body, so a page's own sticky footer
 * still sits above the bar rather than under it.
 */
.x-content.has-tabbar {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* ── Type utilities used across the app ────────────────────────────────── */
.x-display { font-family: var(--font-display); letter-spacing: -.02em; }
.x-eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 680;
  color: var(--ink-3);
}
/* Any column of figures. Non-negotiable in tables and metrics. */
.x-num { font-variant-numeric: tabular-nums; }