/* ==========================================================================================
   The default InWise theme: Light, Dark and Midnight.

   A product adopts it with one line and owns no palette of its own:

       <link href="_content/InWise.ProductPlatform.Components/inwise-theme.css" rel="stylesheet" />

   Three layers, each written once.

   1. THE PALETTES, as raw tokens. Every colour of the theme appears exactly once in this file,
      under the name of the appearance it belongs to.
   2. THE SEMANTIC CONTRACT, `--inwise-*` by role. Each appearance states the whole set: an
      appearance that stated only what differs from another would leave the rest at whatever the
      page already carried, which is a white page under a dark navigation.
   3. THE MAPPING onto the tokens the components read — the platform's own and Fluent's — written
      once for every appearance, because only the semantic values change. **A product that
      overrides one semantic token moves everything downstream and touches no component code.**

   `[data-inwise-appearance="light|dark|midnight|system"]` themes the element and everything
   inside it; `:root` carries Light, so an application that links this and chooses nothing opens
   in Light.

   **The document follows the element that carries the appearance**, through
   `html:has([data-inwise-appearance="…"])`. A host page is rendered before a circuit exists, so
   it cannot know a choice nobody has made yet — but it can see the element that holds it, which
   is how the canvas behind a rounded frame, the scrollbars and whatever a short page leaves
   uncovered follow the choice without the product storing one. `system` is the browser's answer between Light and Dark and never resolves to
   Midnight, which is an explicit choice.

   Where an appearance's reference does not state a role, the value is its nearest stated sibling
   of the same kind; where that would be unreadable or inert, it is derived and the contrast is
   measured in the comment beside it.
   ========================================================================================== */

:root {
    /* --- Light, from the ApologiaStudio light palette ------------------------------------- */
    --inwise-light-page: #fbfaf7;
    --inwise-light-surface: #ffffff;
    --inwise-light-surface-muted: #f3f2ee;
    --inwise-light-surface-hover: #eceae4;
    --inwise-light-border: #dedbd4;
    --inwise-light-border-strong: #c8cdc7;
    --inwise-light-text: #252823;
    --inwise-light-heading: #203331;
    --inwise-light-text-muted: #687068;
    --inwise-light-text-subtle: #77817c;
    --inwise-light-accent-soft: #e8f3f0;
    --inwise-light-accent-border: #8ab5ae;
    /* Feedback, which the light reference does not state. Derived, and white reads on each of
       the filled ones: 6.48:1, 7.13:1, 7.26:1. */
    --inwise-light-good-text: #1c6b45;
    --inwise-light-good-surface: #e6f4ec;
    --inwise-light-warning-text: #7a4f00;
    --inwise-light-warning-surface: #fbf0da;
    --inwise-light-error-text: #a4262c;
    --inwise-light-error-surface: #fde7e9;
    --inwise-light-shadow: #20333129;

    /* --- Dark, from the ApologiaStudio dark palette --------------------------------------- */
    --inwise-dark-page: #242424;
    --inwise-dark-surface: #303030;
    --inwise-dark-surface-muted: #3c3c3c;
    --inwise-dark-surface-hover: #494949;
    --inwise-dark-border: #555555;
    --inwise-dark-border-strong: #727272;
    --inwise-dark-text: #ececec;
    --inwise-dark-heading: #f7f7f7;
    --inwise-dark-text-muted: #b4b4b4;
    --inwise-dark-text-subtle: #949494;
    /* The accent of the dark reference is 2.47:1 against its own surface, so it cannot be the
       colour accented *text* is written in. Lightened for that one role: 6.15:1 on the surface,
       and 5.63:1 on the soft accent below. */
    --inwise-dark-accent-text: #6fbfb4;
    --inwise-dark-accent-soft: #1e3b38;
    --inwise-dark-shadow: #00000066;

    /* --- The accent, which both references state the same way ------------------------------ */
    /* Light and dark are given the same accent, so it is named for itself: an appearance that
       referred to another's accent would be borrowing a vocabulary it does not own. White reads
       5.35:1 on it, and 7.34:1 on the strong one a hover takes. */
    --inwise-palette-accent: #2d766e;
    --inwise-palette-accent-strong: #255f59;
    --inwise-palette-on-accent: #ffffff;

    /* --- Midnight, from the WatchOps palette ---------------------------------------------- */
    --inwise-midnight-page: #0b1020;
    --inwise-midnight-surface: #131b2d;
    --inwise-midnight-surface-sunken: #11182a;
    --inwise-midnight-border: #29354c;
    --inwise-midnight-border-soft: #273249;
    --inwise-midnight-text: #e8edf7;
    --inwise-midnight-text-muted: #909cb2;
    --inwise-midnight-text-subtle: #8290aa;
    --inwise-midnight-accent: #b5a9ff;
    --inwise-midnight-selected-text: #f1edff;
    --inwise-midnight-selected-surface: #312958;
    /* The bar across the top of WatchOps, by its own three stops and their placement. A
       gradient is a value this palette can hold like any other: what reads it decides whether
       it can be painted, and the one role that reads it is painted with `background`. */
    --inwise-midnight-top-bar: linear-gradient(90deg, #111a32 0%, #272248 55%, #3b2762 100%);

    /* --- Feedback on a dark surface, which both dark appearances read ---------------------- */
    /* Stated by the WatchOps reference and readable on either dark surface: 9.92:1, 10.49:1 and
       10.23:1, and white on each of them above 12:1. Named for what they are rather than for one
       of the two appearances, so neither borrows the other's vocabulary. */
    --inwise-feedback-dark-good-text: #b8f0d0;
    --inwise-feedback-dark-good-surface: #17392a;
    --inwise-feedback-dark-warning-text: #ffe0a1;
    --inwise-feedback-dark-warning-surface: #3a2d16;
    --inwise-feedback-dark-error-text: #ffc4ca;
    --inwise-feedback-dark-error-surface: #3b1b24;
    /* A hover surface the reference does not state: the midpoint of its surface and its soft
       line, where the body text reads 12.84:1. And its accent is light, so what is written on
       it is the page's own colour: 9.09:1. */
    --inwise-midnight-surface-hover: #1d263b;
    --inwise-midnight-on-accent: #0b1020;
    --inwise-midnight-accent-strong: #d3cbff;
    --inwise-midnight-shadow: #00000080;
}

/* ==========================================================================================
   2. The semantic contract. Each appearance states every role.
   ========================================================================================== */

:root,
[data-inwise-appearance="light"],
html:has([data-inwise-appearance="light"]) {
    color-scheme: light;

    --inwise-page: var(--inwise-light-page);
    --inwise-surface: var(--inwise-light-surface);
    --inwise-surface-muted: var(--inwise-light-surface-muted);
    --inwise-surface-sunken: var(--inwise-light-surface-muted);
    --inwise-surface-hover: var(--inwise-light-surface-hover);
    --inwise-border: var(--inwise-light-border);
    --inwise-border-strong: var(--inwise-light-border-strong);
    --inwise-border-soft: var(--inwise-light-border);
    --inwise-text: var(--inwise-light-text);
    --inwise-heading: var(--inwise-light-heading);
    --inwise-text-muted: var(--inwise-light-text-muted);
    --inwise-text-subtle: var(--inwise-light-text-subtle);
    --inwise-accent: var(--inwise-palette-accent);
    --inwise-accent-strong: var(--inwise-palette-accent-strong);
    --inwise-accent-soft: var(--inwise-light-accent-soft);
    --inwise-accent-border: var(--inwise-light-accent-border);
    --inwise-accent-text: var(--inwise-palette-accent);
    --inwise-on-accent: var(--inwise-palette-on-accent);
    --inwise-selected-text: var(--inwise-palette-accent-strong);
    --inwise-selected-surface: var(--inwise-light-accent-soft);
    --inwise-good-text: var(--inwise-light-good-text);
    --inwise-good-surface: var(--inwise-light-good-surface);
    --inwise-good-filled: var(--inwise-light-good-text);
    --inwise-warning-text: var(--inwise-light-warning-text);
    --inwise-warning-surface: var(--inwise-light-warning-surface);
    --inwise-warning-filled: var(--inwise-light-warning-text);
    --inwise-error-text: var(--inwise-light-error-text);
    --inwise-error-surface: var(--inwise-light-error-surface);
    --inwise-error-filled: var(--inwise-light-error-text);
    --inwise-shadow: var(--inwise-light-shadow);

    /* The two areas of the frame an application wears before it shows anything of its own.
       Stated by every appearance, because a role one of them omitted would leave the area
       painted by whatever the page already carried — the defect this theme exists to make
       impossible. Light, Dark and System state what is painted there today, so none of the
       three moves. */
    --inwise-top-bar-background: var(--inwise-palette-accent);
    --inwise-top-bar-foreground: var(--inwise-palette-on-accent);
    --inwise-navigation-background: var(--inwise-light-page);
}

[data-inwise-appearance="dark"],
html:has([data-inwise-appearance="dark"]) {
    color-scheme: dark;

    --inwise-page: var(--inwise-dark-page);
    --inwise-surface: var(--inwise-dark-surface);
    --inwise-surface-muted: var(--inwise-dark-surface-muted);
    --inwise-surface-sunken: var(--inwise-dark-page);
    --inwise-surface-hover: var(--inwise-dark-surface-hover);
    --inwise-border: var(--inwise-dark-border);
    --inwise-border-strong: var(--inwise-dark-border-strong);
    --inwise-border-soft: var(--inwise-dark-surface-muted);
    --inwise-text: var(--inwise-dark-text);
    --inwise-heading: var(--inwise-dark-heading);
    --inwise-text-muted: var(--inwise-dark-text-muted);
    --inwise-text-subtle: var(--inwise-dark-text-subtle);
    --inwise-accent: var(--inwise-palette-accent);
    --inwise-accent-strong: var(--inwise-palette-accent-strong);
    --inwise-accent-soft: var(--inwise-dark-accent-soft);
    --inwise-accent-border: var(--inwise-dark-accent-text);
    --inwise-accent-text: var(--inwise-dark-accent-text);
    --inwise-on-accent: var(--inwise-palette-on-accent);
    --inwise-selected-text: var(--inwise-dark-accent-text);
    --inwise-selected-surface: var(--inwise-dark-accent-soft);
    --inwise-good-text: var(--inwise-feedback-dark-good-text);
    --inwise-good-surface: var(--inwise-feedback-dark-good-surface);
    --inwise-good-filled: var(--inwise-feedback-dark-good-surface);
    --inwise-warning-text: var(--inwise-feedback-dark-warning-text);
    --inwise-warning-surface: var(--inwise-feedback-dark-warning-surface);
    --inwise-warning-filled: var(--inwise-feedback-dark-warning-surface);
    --inwise-error-text: var(--inwise-feedback-dark-error-text);
    --inwise-error-surface: var(--inwise-feedback-dark-error-surface);
    --inwise-error-filled: var(--inwise-feedback-dark-error-surface);
    --inwise-shadow: var(--inwise-dark-shadow);

    --inwise-top-bar-background: var(--inwise-palette-accent);
    --inwise-top-bar-foreground: var(--inwise-palette-on-accent);
    --inwise-navigation-background: var(--inwise-dark-page);
}

[data-inwise-appearance="midnight"],
html:has([data-inwise-appearance="midnight"]) {
    color-scheme: dark;

    --inwise-page: var(--inwise-midnight-page);
    --inwise-surface: var(--inwise-midnight-surface);
    --inwise-surface-muted: var(--inwise-midnight-surface-sunken);
    --inwise-surface-sunken: var(--inwise-midnight-surface-sunken);
    --inwise-surface-hover: var(--inwise-midnight-surface-hover);
    --inwise-border: var(--inwise-midnight-border);
    --inwise-border-strong: var(--inwise-midnight-border);
    --inwise-border-soft: var(--inwise-midnight-border-soft);
    --inwise-text: var(--inwise-midnight-text);
    --inwise-heading: var(--inwise-midnight-text);
    --inwise-text-muted: var(--inwise-midnight-text-muted);
    --inwise-text-subtle: var(--inwise-midnight-text-subtle);
    --inwise-accent: var(--inwise-midnight-accent);
    --inwise-accent-strong: var(--inwise-midnight-accent-strong);
    --inwise-accent-soft: var(--inwise-midnight-selected-surface);
    --inwise-accent-border: var(--inwise-midnight-accent);
    --inwise-accent-text: var(--inwise-midnight-accent);
    --inwise-on-accent: var(--inwise-midnight-on-accent);
    --inwise-selected-text: var(--inwise-midnight-selected-text);
    --inwise-selected-surface: var(--inwise-midnight-selected-surface);
    --inwise-good-text: var(--inwise-feedback-dark-good-text);
    --inwise-good-surface: var(--inwise-feedback-dark-good-surface);
    --inwise-good-filled: var(--inwise-feedback-dark-good-text);
    --inwise-warning-text: var(--inwise-feedback-dark-warning-text);
    --inwise-warning-surface: var(--inwise-feedback-dark-warning-surface);
    --inwise-warning-filled: var(--inwise-feedback-dark-warning-text);
    --inwise-error-text: var(--inwise-feedback-dark-error-text);
    --inwise-error-surface: var(--inwise-feedback-dark-error-surface);
    --inwise-error-filled: var(--inwise-feedback-dark-error-text);
    --inwise-shadow: var(--inwise-midnight-shadow);

    /* Midnight is the one appearance whose bar is not its accent: WatchOps paints a gradient
       there, and the accent is a light lilac that would read as a band of highlight across the
       head of every page. */
    --inwise-top-bar-background: var(--inwise-midnight-top-bar);
    --inwise-top-bar-foreground: var(--inwise-midnight-text);

    /* And its navigation stands off the page rather than continuing it, which is what the
       sunken surface is for and what WatchOps does with the same two colours. */
    --inwise-navigation-background: var(--inwise-midnight-surface-sunken);
}

/* `system` is the browser's answer and nothing else: Light where it prefers light, Dark where it
   prefers dark. Midnight is not in this block and cannot be reached from it. */
[data-inwise-appearance="system"],
html:has([data-inwise-appearance="system"]) {
    color-scheme: light dark;

    --inwise-page: light-dark(var(--inwise-light-page), var(--inwise-dark-page));
    --inwise-surface: light-dark(var(--inwise-light-surface), var(--inwise-dark-surface));
    --inwise-surface-muted: light-dark(var(--inwise-light-surface-muted), var(--inwise-dark-surface-muted));
    --inwise-surface-sunken: light-dark(var(--inwise-light-surface-muted), var(--inwise-dark-page));
    --inwise-surface-hover: light-dark(var(--inwise-light-surface-hover), var(--inwise-dark-surface-hover));
    --inwise-border: light-dark(var(--inwise-light-border), var(--inwise-dark-border));
    --inwise-border-strong: light-dark(var(--inwise-light-border-strong), var(--inwise-dark-border-strong));
    --inwise-border-soft: light-dark(var(--inwise-light-border), var(--inwise-dark-surface-muted));
    --inwise-text: light-dark(var(--inwise-light-text), var(--inwise-dark-text));
    --inwise-heading: light-dark(var(--inwise-light-heading), var(--inwise-dark-heading));
    --inwise-text-muted: light-dark(var(--inwise-light-text-muted), var(--inwise-dark-text-muted));
    --inwise-text-subtle: light-dark(var(--inwise-light-text-subtle), var(--inwise-dark-text-subtle));
    --inwise-accent: var(--inwise-palette-accent);
    --inwise-accent-strong: var(--inwise-palette-accent-strong);
    --inwise-accent-soft: light-dark(var(--inwise-light-accent-soft), var(--inwise-dark-accent-soft));
    --inwise-accent-border: light-dark(var(--inwise-light-accent-border), var(--inwise-dark-accent-text));
    --inwise-accent-text: light-dark(var(--inwise-palette-accent), var(--inwise-dark-accent-text));
    --inwise-on-accent: var(--inwise-palette-on-accent);
    --inwise-selected-text: light-dark(var(--inwise-palette-accent-strong), var(--inwise-dark-accent-text));
    --inwise-selected-surface: light-dark(var(--inwise-light-accent-soft), var(--inwise-dark-accent-soft));
    --inwise-good-text: light-dark(var(--inwise-light-good-text), var(--inwise-feedback-dark-good-text));
    --inwise-good-surface: light-dark(var(--inwise-light-good-surface), var(--inwise-feedback-dark-good-surface));
    --inwise-good-filled: light-dark(var(--inwise-light-good-text), var(--inwise-feedback-dark-good-surface));
    --inwise-warning-text: light-dark(var(--inwise-light-warning-text), var(--inwise-feedback-dark-warning-text));
    --inwise-warning-surface: light-dark(var(--inwise-light-warning-surface), var(--inwise-feedback-dark-warning-surface));
    --inwise-warning-filled: light-dark(var(--inwise-light-warning-text), var(--inwise-feedback-dark-warning-surface));
    --inwise-error-text: light-dark(var(--inwise-light-error-text), var(--inwise-feedback-dark-error-text));
    --inwise-error-surface: light-dark(var(--inwise-light-error-surface), var(--inwise-feedback-dark-error-surface));
    --inwise-error-filled: light-dark(var(--inwise-light-error-text), var(--inwise-feedback-dark-error-surface));
    --inwise-shadow: light-dark(var(--inwise-light-shadow), var(--inwise-dark-shadow));

    --inwise-top-bar-background: var(--inwise-palette-accent);
    --inwise-top-bar-foreground: var(--inwise-palette-on-accent);
    --inwise-navigation-background: light-dark(var(--inwise-light-page), var(--inwise-dark-page));
}

/* ==========================================================================================
   3. The mapping, written once: every colour and shadow token the platform's components and the
   Fluent primitives they compose read, answered from the semantic contract above.
   ========================================================================================== */

:root,
[data-inwise-appearance] {
    --colorNeutralBackground1: var(--inwise-surface);
    --colorNeutralBackground1Hover: var(--inwise-surface-hover);
    --colorNeutralBackground1Pressed: var(--inwise-surface-hover);
    --colorNeutralBackground1Selected: var(--inwise-selected-surface);
    --colorNeutralBackground2: var(--inwise-page);
    --colorNeutralBackground3: var(--inwise-surface-muted);
    --colorNeutralBackground3Hover: var(--inwise-surface-hover);
    --colorNeutralBackground3Selected: var(--inwise-selected-surface);
    --colorNeutralBackground4: var(--inwise-surface-sunken);
    --colorNeutralBackground4Hover: var(--inwise-surface-hover);
    --colorNeutralBackground5: var(--inwise-surface-sunken);
    --colorNeutralBackground5Hover: var(--inwise-surface-hover);
    --colorNeutralBackground6: var(--inwise-surface-muted);
    --colorNeutralBackgroundDisabled: var(--inwise-surface-muted);

    --colorNeutralForeground1: var(--inwise-text);
    --colorNeutralForeground1Hover: var(--inwise-text);
    --colorNeutralForeground1Pressed: var(--inwise-text);
    /* Fluent writes these on filled surfaces — a brand header, a warning badge, an inverted
       chip — so they take what the appearance writes on a fill and not what it writes on a page.
       `.fluent-badge[color=warning]` reads the static one, which is where a warning badge took
       the page's own text colour and painted 2.09:1. */
    --colorNeutralForeground1Static: var(--inwise-on-accent);
    --colorNeutralForeground2: var(--inwise-text-muted);
    --colorNeutralForeground2Hover: var(--inwise-text);
    --colorNeutralForeground3: var(--inwise-text-subtle);
    --colorNeutralForeground4: var(--inwise-text-subtle);
    --colorNeutralForegroundDisabled: var(--inwise-text-subtle);
    --colorNeutralForegroundInverted: var(--inwise-on-accent);
    --colorNeutralForegroundOnBrand: var(--inwise-on-accent);
    /* What is written on a selected surface. The role existed and nothing read it, so an
       appearance could state it and no selected thing would follow. */
    --colorNeutralForeground1Selected: var(--inwise-selected-text);
    --colorNeutralForeground2Selected: var(--inwise-selected-text);

    --colorNeutralStroke1: var(--inwise-border);
    --colorNeutralStroke1Hover: var(--inwise-border-strong);
    --colorNeutralStroke1Pressed: var(--inwise-border-strong);
    --colorNeutralStroke1Selected: var(--inwise-border-strong);
    --colorNeutralStroke2: var(--inwise-border-soft);
    --colorNeutralStroke3: var(--inwise-border-soft);
    --colorNeutralStrokeAccessible: var(--inwise-border-strong);
    --colorNeutralStrokeAccessiblePressed: var(--inwise-border-strong);
    --colorStrokeFocus2: var(--inwise-accent);

    --colorBrandBackground: var(--inwise-accent);
    --colorBrandBackgroundHover: var(--inwise-accent-strong);
    --colorBrandBackgroundPressed: var(--inwise-accent-strong);
    --colorBrandBackground2: var(--inwise-accent-soft);
    --colorBrandBackground2Hover: var(--inwise-accent-soft);
    --colorBrandBackground2Pressed: var(--inwise-accent-soft);
    --colorBrandBackgroundInvertedSelected: var(--inwise-accent-soft);
    --colorBrandForeground1: var(--inwise-accent-text);
    --colorBrandForeground2: var(--inwise-accent-text);
    --colorBrandForegroundLink: var(--inwise-accent-text);
    --colorBrandForegroundLinkHover: var(--inwise-selected-text);
    --colorBrandForegroundLinkSelected: var(--inwise-selected-text);
    --colorBrandStroke1: var(--inwise-accent-border);
    --colorBrandStroke2: var(--inwise-accent-border);
    --colorCompoundBrandForeground1: var(--inwise-accent-text);
    --colorCompoundBrandStroke: var(--inwise-accent-border);

    --colorPaletteGreenBackground3: var(--inwise-good-filled);
    --colorPaletteYellowBackground3: var(--inwise-warning-filled);
    --colorPaletteYellowBorderActive: var(--inwise-warning-text);
    --colorPaletteDarkOrangeBackground3: var(--inwise-warning-filled);
    --colorPaletteRedBackground3: var(--inwise-error-filled);
    --colorPaletteRedForeground1: var(--inwise-error-text);
    --colorPaletteRedBorder2: var(--inwise-error-text);

    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: var(--inwise-surface-hover);
    --colorTransparentBackground: transparent;
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: var(--inwise-border);

    --shadow2: 0 1px 2px var(--inwise-shadow);
    --shadow4: 0 2px 4px var(--inwise-shadow);
    --shadow8: 0 4px 8px var(--inwise-shadow);
    --shadow16: 0 8px 16px var(--inwise-shadow);
    --shadow28: 0 14px 28px var(--inwise-shadow);
    --shadow64: 0 32px 64px var(--inwise-shadow);
}

/* The page itself, so the appearance reaches what the application does not paint: the canvas
   behind a rounded frame, the scrollbars, and the space a short page leaves. */
[data-inwise-appearance] {
    color: var(--inwise-text);
    background: var(--inwise-page);
}