/* ============================================================================
   BrightSpace site theme: "Phosphor", in the MEDiAGATO theme-kit vocabulary.

   THE ONLY PLACE THIS SITE'S COLOURS AND TYPE FACES ARE WRITTEN DOWN.
   style.css reads var(--mg-*) and nothing else. To reskin: edit the values in
   this file (or add another [data-mg-theme="..."] block and flip the attribute
   on <html>). Never touch the names.

   Values are copied from the desktop app's palette, theme_tokens.py (DARK and
   LIGHT), so the site and the app read as one product. Mapping:
     ground -> bg          surface -> surface     surface_hi -> surface-2
     line -> border        line_hi -> border-2
     ink / ink_dim / ink_faint -> ink / ink-2 / ink-3
     accent -> accent      accent_ink -> accent-ink
     good / warn / bad -> good / warn / crit
   If theme_tokens.py changes, change it there first and re-copy here.

   Daylight is the default. Dark is an automatic prefers-color-scheme override
   of the same tokens, and an explicit data-mg-mode="dark" on <html> forces it.

   Load order: mg-theme.css (the kit, vendored unchanged), this file, style.css.
   ============================================================================ */

[data-mg-theme="phosphor"] {
  /* shape + type (the kit's four non-colour tokens) */
  --mg-radius: 6px;
  --mg-font-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mg-font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mg-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --mg-tracking-label: 0.12em;

  /* surfaces */
  --mg-bg: #e9ece5;
  --mg-surface: #e0e4db;
  --mg-surface-2: #d5dacf;
  --mg-border: #c9cfc1;
  --mg-border-2: #b2b9a8;

  /* ink */
  --mg-ink: #1a1814;
  --mg-ink-2: #56534d;
  --mg-ink-3: #625f59;

  /* accent */
  --mg-accent: #698a1b;
  --mg-accent-ink: #0b1005;
  --mg-accent-soft: rgba(105, 138, 27, 0.14);
  --mg-focus: #4c6612;

  /* status */
  --mg-good: #2f6f5c;
  --mg-warn: #7a601f;
  --mg-crit: #963a2f;
  --mg-good-soft: rgba(47, 111, 92, 0.13);
  --mg-warn-soft: rgba(122, 96, 31, 0.13);
  --mg-crit-soft: rgba(150, 58, 47, 0.12);

  --mg-shadow: 0 1px 2px rgba(26, 24, 20, 0.08), 0 8px 24px rgba(26, 24, 20, 0.08);

  /* Site-local extension, NOT part of the kit vocabulary: the four output
     colours of the app's preview canvas (theme_tokens.py OUTPUT_SWATCHES).
     Used only by the layout figure. */
  --bs-out-0: #6f8f26;
  --bs-out-1: #2a7d90;
  --bs-out-2: #a8306b;
  --bs-out-3: #a35a24;
}

[data-mg-theme="phosphor"][data-mg-mode="dark"] {
  --mg-bg: #080b09;
  --mg-surface: #0e1311;
  --mg-surface-2: #151b18;
  --mg-border: #1b211e;
  --mg-border-2: #2c3430;
  --mg-ink: #eceae6;
  --mg-ink-2: #9a9793;
  --mg-ink-3: #8a8782;
  --mg-accent: #b4dd5c;
  --mg-accent-ink: #0b1005;
  --mg-accent-soft: rgba(180, 221, 92, 0.14);
  --mg-focus: #c8ea78;
  --mg-good: #4e9c86;
  --mg-warn: #c1913c;
  --mg-crit: #c9584c;
  --mg-good-soft: rgba(78, 156, 134, 0.16);
  --mg-warn-soft: rgba(193, 145, 60, 0.16);
  --mg-crit-soft: rgba(201, 88, 76, 0.16);
  --mg-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.4);
  --bs-out-0: #b4dd5c;
  --bs-out-1: #5cc8dd;
  --bs-out-2: #dd5c9e;
  --bs-out-3: #dd8f5c;
}

@media (prefers-color-scheme: dark) {
  [data-mg-theme="phosphor"]:not([data-mg-mode="light"]) {
    --mg-bg: #080b09;
    --mg-surface: #0e1311;
    --mg-surface-2: #151b18;
    --mg-border: #1b211e;
    --mg-border-2: #2c3430;
    --mg-ink: #eceae6;
    --mg-ink-2: #9a9793;
    --mg-ink-3: #8a8782;
    --mg-accent: #b4dd5c;
    --mg-accent-ink: #0b1005;
    --mg-accent-soft: rgba(180, 221, 92, 0.14);
    --mg-focus: #c8ea78;
    --mg-good: #4e9c86;
    --mg-warn: #c1913c;
    --mg-crit: #c9584c;
    --mg-good-soft: rgba(78, 156, 134, 0.16);
    --mg-warn-soft: rgba(193, 145, 60, 0.16);
    --mg-crit-soft: rgba(201, 88, 76, 0.16);
    --mg-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.4);
    --bs-out-0: #b4dd5c;
    --bs-out-1: #5cc8dd;
    --bs-out-2: #dd5c9e;
    --bs-out-3: #dd8f5c;
  }
}