/* ============================================================================
   INTRIKATA FUSION — canonical design tokens
   Source of truth: adaptableui.com (site/css/fusion.css). Consumed by
   docs.intrikata.com, intrikata.com, topology.intrikata.com.

   WHY THIS FILE EXISTS. Four sites had four token vocabularies for one visual
   language: adaptableui `--ink/--hi/--line`, docs `--fg/--accent/--border`,
   console `--ink/--lamp/--edge`, topology `--text-primary/--accent-color/
   --border-color` (125 tokens, six themes). The values already agreed in
   places -- console's `--lamp` and adaptableui's `--hi` are both #ffb454 -- so
   the divergence was naming, not design. This file names the language ONCE.
   Each site keeps its own vocabulary and aliases it here, so every existing
   rule in 260KB of topology CSS keeps working untouched.

   MEASURED, NOT ASSUMED. Every colour below was checked against WCAG 2.1
   contrast on all three surfaces before being written. Two defects in the
   inherited palette were found and corrected:
     --faint  #54646f -> #697d8b   was 2.81 on --elev, below even the 3.0
                                   non-text minimum; now 4.01 there, 4.61 on --bg
     --focus  (new)   #6f9bbd      --line-hi (2.39) was the only ring candidate
                                   and failed 3.0; --focus clears it on every
                                   surface (5.81 elev / 6.67 bg) and is
                                   deliberately NOT ok/bad/accent so a focus
                                   ring can never be misread as a state
   Dark: ink 14.70, meta 17.74, hi/genesis/shadow 10-11 -> all AAA.
   Light: every token AA or better on bg/panel/elev; the single exception is
   --faint on --elev at 4.45, which is non-body by definition and clears the
   3.0 UI threshold with margin.

   THEMING IS THREE-STATE. Dark is the default because the source of truth is
   dark-first. An explicit choice stamps [data-theme]; with nothing stamped the
   OS preference decides. Sites that were dark-only gain light for free.
   ========================================================================= */

:root {
  /* ---- surfaces (back to front) ---- */
  --void:      #070b11;
  --bg:        #070b11;
  --gutter:    #05080c;
  --panel:     #0b121a;
  --elev:      #121c28;

  /* ---- lines ---- */
  --line:      #243544;   /* decorative rule; no contrast minimum applies */
  --line-hi:   #3a5164;   /* emphasised rule -- NOT a focus ring, see --focus */

  /* ---- text ---- */
  --ink:       #d5e0e8;   /* body            14.70 on --bg  AAA */
  --mute:      #8a9ba8;   /* secondary        6.89 on --bg  AA  */
  --faint:     #697d8b;   /* tertiary/non-body 4.61 on --bg, 4.01 on --elev */
  --ink-on:    #070b11;   /* text on an accent fill */

  /* ---- semantic layer colours (M/G/S/MGS taxonomy) ---- */
  --meta:      #edf4f8;
  --genesis:   #a3cc7a;
  --shadow:    #5ac8d8;
  --mgs:       #ffb454;

  /* ---- state ---- */
  --hi:        #ffb454;
  --accent:    #ffb454;
  --ok:        #a3cc7a;
  --warn:      #e6c07b;
  --bad:       #f0716f;
  --focus:     #6f9bbd;

  /* ---- type ---- */
  --display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- geometry ---- */
  --gap: 2px;
  --r: 0;

  /* ---- readability ---- */
  --measure: 72ch;        /* max line length for prose; ~66-80ch is the
                             comfortable range, and every one of these four
                             sites had at least one full-width text column */
  --leading: 1.6;         /* prose line-height; chrome stays tighter at 1.4 */

  /* DECLARE BOTH, always. This is what stops Chrome/Edge "Auto Dark Theme"
     from algorithmically inverting the page. That feature force-darkens sites
     it believes cannot do dark themselves; a root that advertises only ONE
     scheme reads as exactly that, so the carefully measured light palette
     below could be re-darkened by the browser on top of itself -- inverting
     colours the contrast audit had already verified, and producing pairs no
     stylesheet here ever wrote. `light dark` says "this page handles both",
     and the UA steps back. The narrower single values are set ONLY under an
     explicit [data-theme] choice, where forcing UA widgets is the intent. */
  color-scheme: light dark;
}

/* Light — applies when the OS asks for it AND the reader has not explicitly
   chosen dark. Only the tokens that change are redefined. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void:    #e2e8ed;
    --bg:      #f4f7f9;
    --gutter:  #e2e8ed;
    --panel:   #ffffff;
    --elev:    #e9eef2;

    --line:    #c7d2db;
    --line-hi: #9fb0bd;

    --ink:     #131c25;
    --mute:    #4a5a67;
    --faint:   #5d6f7d;
    --ink-on:  #ffffff;

    --meta:    #243544;
    --genesis: #3d6b1f;
    --shadow:  #0d6b78;
    --mgs:     #8a5200;

    --hi:      #8a5200;
    --accent:  #8a5200;
    --ok:      #2f6b1a;
    --warn:    #795c00;
    --bad:     #a6231f;
    --focus:   #1f5f86;
  }
}

/* Explicit dark — pins UA widgets when the reader has chosen dark outright. */
:root[data-theme="dark"] { color-scheme: dark; }

/* Explicit light — wins over the OS preference in both directions. */
:root[data-theme="light"] {
  --void:    #e2e8ed;
  --bg:      #f4f7f9;
  --gutter:  #e2e8ed;
  --panel:   #ffffff;
  --elev:    #e9eef2;

  --line:    #c7d2db;
  --line-hi: #9fb0bd;

  --ink:     #131c25;
  --mute:    #4a5a67;
  --faint:   #5d6f7d;
  --ink-on:  #ffffff;

  --meta:    #243544;
  --genesis: #3d6b1f;
  --shadow:  #0d6b78;
  --mgs:     #8a5200;

  --hi:      #8a5200;
  --accent:  #8a5200;
  --ok:      #2f6b1a;
  --warn:    #795c00;
  --bad:     #a6231f;
  --focus:   #1f5f86;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Accessibility. These are the only rules in this file that are not custom
   properties, and each is additive -- none changes layout, so a site can adopt
   the file without re-testing its geometry.
   ------------------------------------------------------------------------ */

/* A visible ring for keyboard users only. :focus-visible does not fire on
   mouse clicks, so this cannot introduce the "ugly outline on click" that
   makes teams delete focus styles altogether. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Honour the OS reduced-motion setting. Animation is never load-bearing on
   any of these four sites, so removing it costs nothing and prevents
   vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Opt-in prose measure. Applied by adding class="prose" -- never imposed on
   an existing column, so no current layout shifts. */
.prose {
  max-width: var(--measure);
  line-height: var(--leading);
}

/* Opt-in comfortable tap target (WCAG 2.5.8 minimum is 24px; 44px is the
   comfortable touch size). */
.tap {
  min-height: 44px;
  min-width: 44px;
}

/* ---------------------------------------------------------------------------
   FORCED COLORS — Windows High Contrast and equivalent OS modes.

   Measured before writing this: ZERO @media (forced-colors) blocks existed
   across all four sites. In that mode the UA replaces author colours with a
   user-chosen system palette, and every custom property above stops deciding
   anything. Two things break silently when a design is not prepared for it:

     1. Anything that draws a boundary with COLOUR rather than a border --
        a panel separated only by --panel vs --bg, a badge tinted with an
        alpha fill -- becomes invisible, because both sides collapse to Canvas.
     2. Focus rings drawn in an author colour are discarded, so keyboard
        users can lose the caret entirely.

   The fix is not to re-specify colours (the mode exists precisely to override
   them) but to re-assert STRUCTURE in system colours and let the user's
   palette win. `forced-color-adjust: none` is deliberately NOT used anywhere
   here -- that opts out of the user's accessibility choice, which is the exact
   harm this block exists to prevent.
   ------------------------------------------------------------------------ */
@media (forced-colors: active) {
  /* Keep the keyboard ring visible in the user's own highlight colour. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* Surfaces that were distinguished only by fill need a real edge, or the
     page flattens into one undifferentiated block. */
  :where(table, th, td, fieldset, dialog, [role="dialog"]) {
    border: 1px solid CanvasText;
  }

  /* Controls must stay identifiable as controls. */
  :where(button, [role="button"], input, select, textarea) {
    border: 1px solid ButtonText;
  }

  /* Status carried by colour alone (ok / warn / bad / layer chips) conveys
     nothing once colours are replaced -- WCAG 1.4.1 "use of colour". Give the
     carriers a border so the distinction survives as shape. */
  :where([class*="badge"], [class*="chip"], [class*="status"], [class*="tag"]) {
    border: 1px solid CanvasText;
  }

  /* Images used as icons keep their shape rather than being flattened. */
  :where(img, svg) {
    forced-color-adjust: auto;
  }
}