/* Themes of the portal — values of the tokens of the design system (brandbook 2.7, stage 9a, 1.5.100).
 * Summit (code command) is the reference: its values are the :root of ds.css and it has no block here. Every other theme
 * is the same shell and the same pages of Summit with its own values of the same tokens - colours, the colour of the
 * menu, radii and shadows. A theme never changes words, layout, sizes, components or motion, and a block below holds
 * nothing but --ds-* values (tests/test_themes_as_tokens_stage9a.py). The font is DS Inter in every theme: it is
 * self-hosted, so the screenshot and every computer show the same letters. */

/* Сбалансированный (clarity): a clean light workspace - a crisper blue, a cooler background, the deep blue menu. */
:root[data-theme="clarity"]{
  --ds-bg:#f5f7fc;--ds-surface:#ffffff;--ds-surface-soft:#f7f9fd;
  --ds-ink:#1b2638;--ds-ink-muted:#5d6b82;--ds-ink-faint:#97a3b6;
  --ds-line:#dde5f0;--ds-line-soft:#ebf0f8;--ds-line-strong:#c5d1e3;
  --ds-brand:#2563eb;--ds-brand-hover:#1d4fd0;--ds-brand-soft:#ebf1fe;--ds-accent:#0f7a86;
  --ds-success:#178a57;--ds-success-soft:#e6f6ee;--ds-warning:#a86d12;--ds-warning-soft:#fdf3e1;
  --ds-danger:#c63a34;--ds-danger-soft:#fdecea;--ds-danger-hover:#a92f2a;
  --ds-sidebar:linear-gradient(180deg,#172b4d 0%,#112744 100%);
  --ds-side-ink:#cfdcf2;--ds-side-ink-muted:#90a6c8;--ds-side-raised:#2a4068;
  --ds-shadow-1:0 1px 2px rgba(27,38,56,.04),0 2px 8px rgba(27,38,56,.04);
  --ds-shadow-2:0 8px 24px rgba(27,38,56,.08);
  --ds-shadow-3:0 20px 48px rgba(27,38,56,.16);
  --ds-focus:0 0 0 3px rgba(37,99,235,.2);
  --ds-backdrop:rgba(27,38,56,.32);
}

/* Навигатор (compact): a neutral graphite workspace - graphite menu and ink, a steel blue, tighter corners and flatter
   shadows. */
:root[data-theme="compact"]{
  --ds-bg:#f2f3f5;--ds-surface:#ffffff;--ds-surface-soft:#f6f7f9;
  --ds-ink:#1f2630;--ds-ink-muted:#5a6270;--ds-ink-faint:#9aa1ac;
  --ds-line:#e0e3e8;--ds-line-soft:#ebedf1;--ds-line-strong:#c8cdd5;
  --ds-brand:#3a5d88;--ds-brand-hover:#2f4d72;--ds-brand-soft:#ebf0f6;--ds-accent:#2f7d77;
  --ds-success:#23794f;--ds-success-soft:#e7f3ec;--ds-warning:#99661a;--ds-warning-soft:#f8f1e3;
  --ds-danger:#b23a33;--ds-danger-soft:#f9ebea;--ds-danger-hover:#962f29;
  --ds-sidebar:linear-gradient(180deg,#252a33 0%,#1d2128 100%);
  --ds-side-ink:#d3d9e2;--ds-side-ink-muted:#939caa;--ds-side-raised:#363d49;
  --ds-radius-sm:6px;--ds-radius-md:8px;--ds-radius-lg:10px;
  --ds-shadow-1:0 1px 2px rgba(31,38,48,.06);
  --ds-shadow-2:0 6px 18px rgba(31,38,48,.1);
  --ds-shadow-3:0 18px 40px rgba(31,38,48,.18);
  --ds-focus:0 0 0 3px rgba(58,93,136,.22);
  --ds-backdrop:rgba(31,38,48,.36);
}

/* Панорама (canvas): soft panels - a sage background, a calm teal, the deep green menu, rounder corners and airy shadows. */
:root[data-theme="canvas"]{
  --ds-bg:#eff4f2;--ds-surface:#ffffff;--ds-surface-soft:#f5f9f7;
  --ds-ink:#20302d;--ds-ink-muted:#586c67;--ds-ink-faint:#97a8a3;
  --ds-line:#dbe6e1;--ds-line-soft:#e8f0ec;--ds-line-strong:#c2d3cc;
  --ds-brand:#1d7366;--ds-brand-hover:#175f55;--ds-brand-soft:#e5f2ef;--ds-accent:#2f6fb0;
  --ds-success:#227a4f;--ds-success-soft:#e5f3eb;--ds-warning:#9b6a16;--ds-warning-soft:#f9f2e2;
  --ds-danger:#b9433b;--ds-danger-soft:#f9ecea;--ds-danger-hover:#9c3730;
  --ds-sidebar:linear-gradient(180deg,#1d3f3a 0%,#163430 100%);
  --ds-side-ink:#cfe3dd;--ds-side-ink-muted:#9cbcb3;--ds-side-raised:#2c534c;
  --ds-radius-sm:10px;--ds-radius-md:12px;--ds-radius-lg:18px;
  --ds-shadow-1:0 1px 3px rgba(32,48,45,.05),0 6px 18px rgba(32,48,45,.05);
  --ds-shadow-2:0 10px 28px rgba(32,48,45,.09);
  --ds-shadow-3:0 24px 56px rgba(32,48,45,.16);
  --ds-focus:0 0 0 3px rgba(29,115,102,.2);
  --ds-backdrop:rgba(32,48,45,.3);
}

/* Win'95 (windows-95): the classic desktop - the menu in the teal of its desktop, the grey of its windows, navy of its
   selection, square corners and hard black shadows of a window on the desktop. */
:root[data-theme="windows-95"]{
  --ds-bg:#c0c0c0;--ds-surface:#ffffff;--ds-surface-soft:#ececec;
  --ds-ink:#000000;--ds-ink-muted:#3c3c3c;--ds-ink-faint:#7a7a7a;
  --ds-line:#808080;--ds-line-soft:#d4d4d4;--ds-line-strong:#404040;
  --ds-brand:#000080;--ds-brand-hover:#0000a8;--ds-brand-soft:#e2e2f4;--ds-accent:#008080;
  --ds-success:#006b00;--ds-success-soft:#e2f2e2;--ds-warning:#7a5a00;--ds-warning-soft:#fbf3d6;
  --ds-danger:#a00000;--ds-danger-soft:#f8e2e2;--ds-danger-hover:#800000;
  --ds-sidebar:linear-gradient(180deg,#006262 0%,#005b5b 100%);
  --ds-side-ink:#ffffff;--ds-side-ink-muted:#b0dcdc;--ds-side-raised:#0b7474;
  --ds-radius-sm:0px;--ds-radius-md:0px;--ds-radius-lg:0px;--ds-radius-pill:0px;
  --ds-shadow-1:1px 1px 0 0 #000000;
  --ds-shadow-2:2px 2px 0 0 #000000;
  --ds-shadow-3:3px 3px 0 0 #000000;
  --ds-shadow-knob:1px 1px 0 0 #000000;
  --ds-focus:0 0 0 2px #000080;
  --ds-backdrop:rgba(0,0,0,.25);
  --ds-chart-3:#800080;--ds-chart-4:#808000;--ds-chart-5:#0000ff;
}

/* Win'3.11 (windows-311): the Program Manager era - white windows with dark frames on a light grey workspace, the navy
   menu of its title bars, teal buttons, square corners and flat windows with a hard shadow only when something lies above
   the page. */
:root[data-theme="windows-311"]{
  --ds-bg:#dcdcdc;--ds-surface:#ffffff;--ds-surface-soft:#f0f0f0;
  --ds-ink:#000000;--ds-ink-muted:#3a3a3a;--ds-ink-faint:#777777;
  --ds-line:#5a5a5a;--ds-line-soft:#d0d0d0;--ds-line-strong:#000000;
  --ds-brand:#006b6b;--ds-brand-hover:#005656;--ds-brand-soft:#e0f0f0;--ds-accent:#000080;
  --ds-success:#006b00;--ds-success-soft:#e2f2e2;--ds-warning:#7a5a00;--ds-warning-soft:#fbf3d6;
  --ds-danger:#a00000;--ds-danger-soft:#f8e2e2;--ds-danger-hover:#800000;
  --ds-sidebar:linear-gradient(180deg,#000080 0%,#00005e 100%);
  --ds-side-ink:#ffffff;--ds-side-ink-muted:#b4b4e6;--ds-side-raised:#1c1c9c;
  --ds-radius-sm:0px;--ds-radius-md:0px;--ds-radius-lg:0px;--ds-radius-pill:0px;
  --ds-shadow-1:0 0 0 0 transparent;
  --ds-shadow-2:2px 2px 0 0 rgba(0,0,0,.55);
  --ds-shadow-3:4px 4px 0 0 rgba(0,0,0,.55);
  --ds-shadow-knob:1px 1px 0 0 #000000;
  --ds-focus:0 0 0 2px #006b6b;
  --ds-backdrop:rgba(0,0,0,.25);
  --ds-chart-3:#800080;--ds-chart-4:#808000;--ds-chart-5:#0000ff;
}