/*
 * Vigil design tokens (shared WYN design system). wyn-vigil.css only uses these variables.
 *
 * Default theme "wayan" (based on wayan.cc): black on white, heavy uppercase Inter headlines,
 * square corners, thick rules. Status colors (up, down, degraded, maintenance) are the only hues,
 * because "up" and "down" must never look alike. Theme "neutral" (Settings → Look): a quieter look for teams
 * who want their own branding. Switch with <html data-wyn-theme="neutral">.
 */

/* Inter is bundled (SIL Open Font License, see fonts/OFL.txt): no requests to Google. */
@font-face {
  font-family: "Wyn Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/wyn-inter-latin.woff2") format("woff2-variations"), url("fonts/wyn-inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Wyn Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/wyn-inter-latin-ext.woff2") format("woff2-variations"), url("fonts/wyn-inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colors */
  --wyn-ink: #000000;          /* text, rules, primary buttons */
  --wyn-paper: #ffffff;        /* page and cards */
  --wyn-wash: #f4f2ee;         /* soft warm grey behind page headers */
  --wyn-muted: #6b6b6b;        /* body copy and secondary text */
  --wyn-line: #e3e1dd;         /* light dividers between rows */
  --wyn-hover: #f7f6f3;
  --wyn-danger: #c4161c;
  --wyn-ok: #0a7a3c;
  --wyn-warn: #a35a00;

  /* Status: the only colors in the bold theme */
  --wyn-up: #12a150;
  --wyn-down: #e5242b;
  --wyn-degraded: #e8a20c;
  --wyn-maint: #2f5bea;
  --wyn-none: #dcdad5;

  /* Shape */
  --wyn-rule: 4px;             /* line under the header */
  --wyn-border: 3px;           /* outlined buttons, panels, focus */
  --wyn-input-border: 2px;
  --wyn-radius: 0;

  /* Type */
  --wyn-font: "Wyn Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wyn-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --wyn-display-weight: 900;
  --wyn-display-tracking: -0.045em;
  --wyn-display-case: uppercase;
  --wyn-label-weight: 800;
  --wyn-label-tracking: 0.14em;
  --wyn-label-case: uppercase;
  --wyn-label-size: 0.74rem;
  --wyn-dot: inline;           /* the full stop after headlines ("FORMS.") */
  --wyn-outline: 1.5px;        /* stroke width of outlined subtitles; 0 = solid text */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wyn-ink: #ffffff;
    --wyn-paper: #0b0b0b;
    --wyn-wash: #161514;
    --wyn-muted: #a3a3a3;
    --wyn-line: #2a2a2a;
    --wyn-hover: #151515;
    --wyn-danger: #ff5a5f;
    --wyn-ok: #3ccf7a;
    --wyn-warn: #f0b23c;
    --wyn-up: #33d17a;
    --wyn-down: #ff4d52;
    --wyn-degraded: #f5b83d;
    --wyn-maint: #6f8dff;
    --wyn-none: #2b2b2b;
    color-scheme: dark;
  }
}

/* ---------- Neutral theme ---------- */
:root[data-wyn-theme="neutral"] {
  --wyn-ink: #18181b;
  --wyn-wash: #f6f7f9;
  --wyn-muted: #5f6470;
  --wyn-line: #e4e6ea;
  --wyn-hover: #f8f9fb;
  --wyn-rule: 1px;
  --wyn-border: 1px;
  --wyn-input-border: 1px;
  --wyn-radius: 8px;
  --wyn-display-weight: 700;
  --wyn-display-tracking: -0.02em;
  --wyn-display-case: none;
  --wyn-label-weight: 600;
  --wyn-label-tracking: 0;
  --wyn-label-case: none;
  --wyn-label-size: 0.86rem;
  --wyn-dot: none;
  --wyn-outline: 0;
  --wyn-outline-fill: var(--wyn-muted);   /* subtitles become plain grey text */
  --wyn-input-color: #c9ccd3;
  --wyn-panel-line: var(--wyn-line);
  --wyn-none: #dfe2e7;
}
@media (prefers-color-scheme: dark) {
  :root[data-wyn-theme="neutral"] {
    --wyn-ink: #f4f4f5;
    --wyn-paper: #111113;
    --wyn-wash: #18181b;
    --wyn-muted: #a1a1aa;
    --wyn-line: #2a2a2e;
    --wyn-hover: #1a1a1d;
    --wyn-input-color: #3a3a40;
    --wyn-none: #2c2c31;
  }
}