/* Design tokens of the redesign shell. Source: knowledge_base/redesign/shell-spec.md, section "Design tokens". */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-greek-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-greek-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-greek-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-greek-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner";
  src: url("fonts/Commissioner-greek-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVuSans-greek-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVuSans-Bold-greek-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("fonts/Ubuntu-Regular-greek-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("fonts/Ubuntu-Medium-greek-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("fonts/Ubuntu-Bold-greek-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-greek-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-greek-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-greek-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Sofia Sans";
  src: url("fonts/SofiaSans-greek-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("fonts/Literata-greek-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root, [data-theme="paper"] {
  color-scheme: light;

  /* The scale of the whole page on a wide screen, like a browser set to 90%. routes.js keeps the measured positions in step with it. */
  --page-zoom: 1;
  /* The smallest size of a literal font size. It stays 12 px on screen under the zoom (C13): 12 / 0.9. */
  --text-min: 0px;

  /* Type scale. No text is below 12 px (C13). */
  --text-caption: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-title: 20px;
  --text-heading: 28px;
  --text-figure: 40px;

  /* Prototype only: the font switch sets data-font on <html>. IBM Plex Sans is the default candidate. One family for headings and text. */
  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-heading: "IBM Plex Sans", system-ui, sans-serif;

  /* Colors. Each text color has a contrast of 4.5 to 1 or more on its surface. */
  --surface-page: #f6f4ef;
  --surface-card: #edeae3;
  --surface-raised: #ffffff;
  --surface-sidebar: #ffffff;
  --ink: #111111;
  /* The strong text and the fill of marks (#1f1f1f), the text on an ink fill, the colors of notices and skeletons. A dark theme turns all of them. */
  --strong: #1f1f1f;
  --on-ink: #ffffff;
  --logo-filter: none;
  --error-text: #a12a2a; --error-bg: #fbefef; --error-edge: #d9a3a3; --error-ink: #7a1f1f;
  --scrim: rgb(17 17 17 / 0.45);
  /* The near-black of shadows and hover washes. The same in every theme, as before: a shadow stays dark. */
  --shade: rgb(17 17 17);
  --shade-black: rgb(0 0 0);
  --notice-bg: #fdf3df; --notice-edge: #b7791f; --notice-text: #5c3d0e; --target-bg: #fff6cc; --card-edge: #e4e0d6;
  /* The tint of a selected row or a note inside a card. A card has the page background, so the tint darkens the page in every theme. */
  --card-tint: color-mix(in srgb, var(--ink) 6%, transparent);
  --skeleton: #e8e5de; --skeleton-2: #efede7; --skeleton-3: #f1efe9;
  --text-primary: #404040;
  --text-secondary: #696972;
  --accent: #2f58f5;
  --sidebar-text: #404040;
  --sidebar-label: #696972;
  --sidebar-hover-bg: #f2f0eb;
  --sidebar-active-text: #111111;
  /* The divider between the sidebar and the page has the weight of the slash in the logo. */
  --divider: 2px solid var(--ink);
  --border: #d6d2c8;
  --focus: #2f58f5;

  /* Every color of the prototypes is a token here (#2). scripts/check.mjs fails on a hex color in any other file.
     Layers: neutrals (above), accent (UI only, never data), categorical, sequential, diverging, data series, status. */
  --surface-sunken: var(--surface-card);
  --rule: #b9b4a8;
  --bar-muted: #cdc8bb;
  --bar-fill: var(--series-1);
  --bar-track: #ece9e0;
  /* Text on a computed fill. The same in every theme, because the fill decides, not the theme. */
  --text-on-light: #1f1f1f;
  --text-on-dark: #ffffff;
  /* A report in a frame takes the theme of the site (report-theme.css), and the card shows through it. */
  --report-bg: transparent;

  /* Categorical: one slot for each ownership group. dash.js maps a group to a slot number, so a group has one color on every page.
     Slot 0 is "no known group". Slots 1 to 8 follow the order of the groups file; slot 9 is Antenna Group (live data only). */
  --cat-0: #9a978f;
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100;
  --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #6250d6; --cat-8: #e34948; --cat-9: #4b5d73;
  /* A dark gray for a fixed "own" category (the domestic affairs of a speech). */
  --cat-strong: #5c5a55;
  /* Parties (Εκλογές). */
  --party-nd: #1e6fd9; --party-syriza: #e23b6d; --party-pasok: #1aa64b; --party-kke: #d11d1d; --party-el: #243b6b;
  --party-plefsi: #7c3aed; --party-near: #c2790b; --party-fl: #be185d; --party-mera25: #0891b2; --party-niki: #4d7c0f;

  /* Sequential: one hue ramp in 7 steps for matrices and heatmaps (Dash.seq). The hue is the data series. Each step has its text color, 4.5 to 1 or more. */
  --seq-1: #e8f2f5; --seq-text-1: #1f1f1f; --seq-2: #cde3e9; --seq-text-2: #1f1f1f; --seq-3: #add1db; --seq-text-3: #1f1f1f; --seq-4: #88bcca; --seq-text-4: #1f1f1f;
  --seq-5: #63a8ba; --seq-text-5: #1f1f1f; --seq-6: #3f93aa; --seq-text-6: #1f1f1f; --seq-7: #1a7f9a; --seq-text-7: #ffffff;

  /* Diverging. Stance: critical red, neutral gray, supportive violet (not the accent blue). Emphasis: more teal, less orange.
     Two sides of a contest (Πολιτική, Κόσμος). The gray middle of a stepped diverging scale. */
  --stance-critical: #c23b3b;
  --stance-critical-strong: #7d1f1f;
  --stance-neutral: #9a978f;
  --stance-supportive: #874099;
  --emph-more: #0f7c78;
  --emph-less: #c2570c;
  --side-a: #2a78d6;
  --side-b: #c4651f;
  --div-mid: #e4e1da;

  /* The 4 ways a story starts (Ιστορίες › Επισκόπηση), in order of the stack, and the fill of the rows of a ranking with one highlighted row. */
  --story-together: var(--series-news); --story-follow: var(--series-other); --story-single: var(--bar-muted); --story-none: var(--rule);
  --bar-rank: var(--bar-fill);

  /* The console of Μέσα › Θέματα (assets/activity.css). */
  --act-page: #07080a; --act-card: #0b0d10; --act-edge: #1d2025; --act-grid: #24282e; --act-lime: #c9e265;
  --act-1: #6fe0cb; --act-2: #f0884f; --act-3: #ef6a50; --act-4: #3fb68b; --act-5: #8a9ab3; --act-6: #8a5cf6; --act-7: #4f7df5; --act-up: #34c07f; --act-down: #f0465a;

  /* Data series: news and the other articles. A teal-blue, apart from the accent. */
  --series-1: #1a7f9a;
  --series-news: var(--series-1);
  --series-other: #a3ccd7;

  /* Status of a verdict (Κόσμος) and success. Each text color has a contrast of 4.5 to 1 or more on its tint. */
  --status-ok: #1d7a4f;
  --status-over: #a15c00;
  --status-open: #4b5d73;
  --status-no: #b42f2f;
  --success-text: #1d7a4f; --success-bg: #eaf5ee; --success-edge: #9fcfb2;

  /* Spacing and shape. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 8px;
  --radius-roomy: 14px;
  --sidebar-width: 192px;
  --header-height: 56px;

  /* Motion (#56). Motion shows what changed. It moves only transform and opacity. Reduced motion keeps the fades and drops the movement. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 360ms;
  --motion-chart: 640ms;
  --motion-stagger: 40ms;
  --motion-distance: 8px;
  /* A move to another page: a short slide of the page, not a full push. */
  --motion-page: 250ms;
  --motion-page-distance: 48px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --ease-spring: cubic-bezier(0.3, 1.3, 0.5, 1);
}

@media (min-width: 1024px) {
  /* The caption is 12 px on screen after the zoom (C13): 12 / 0.9. */
  :root { --page-zoom: 0.9; --text-caption: 13.34px; --text-min: 13.34px; }
  html { zoom: var(--page-zoom); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-distance: 0px; --motion-stagger: 0ms; --motion-page-distance: 0px; }
}

/* Font candidates for the decision of the project lead. "inter" is the font pair of APO-150. */
:root[data-font="inter"] { --font-text: "Inter", system-ui, sans-serif; --font-heading: "Source Serif 4", Georgia, serif; }
:root[data-font="manrope"] { --font-text: "Manrope", system-ui, sans-serif; --font-heading: "Manrope", system-ui, sans-serif; }
:root[data-font="commissioner"] { --font-text: "Commissioner", system-ui, sans-serif; --font-heading: "Commissioner", system-ui, sans-serif; }
/* DejaVu Sans is the font of the logo. Ubuntu is the open font with Greek that is the most similar to it. */
:root[data-font="dejavu"] { --font-text: "DejaVu Sans", system-ui, sans-serif; --font-heading: "DejaVu Sans", system-ui, sans-serif; }
:root[data-font="ubuntu"] { --font-text: "Ubuntu", system-ui, sans-serif; --font-heading: "Ubuntu", system-ui, sans-serif; }
/* Fonts that match the logo (DejaVu Sans): an open humanist sans with Greek, in the same weight. "literata" is the editorial pair, a serif for the headings. */
:root[data-font="noto"] { --font-text: "Noto Sans", system-ui, sans-serif; --font-heading: "Noto Sans", system-ui, sans-serif; }
:root[data-font="sourcesans"] { --font-text: "Source Sans 3", system-ui, sans-serif; --font-heading: "Source Sans 3", system-ui, sans-serif; }
:root[data-font="geologica"] { --font-text: "Geologica", system-ui, sans-serif; --font-heading: "Geologica", system-ui, sans-serif; }
:root[data-font="sofia"] { --font-text: "Sofia Sans", system-ui, sans-serif; --font-heading: "Sofia Sans", system-ui, sans-serif; }
:root[data-font="literata"] { --font-text: "Source Sans 3", system-ui, sans-serif; --font-heading: "Literata", Georgia, serif; }

/* Themes for the decision of the project lead. "paper" is the first block of :root. A theme sets the surfaces, the sidebar, the text, the accent, the bars and the notices.
   The swatches in the sidebar read the same blocks, so each swatch shows the card color and the accent of its theme. Each text color keeps 4.5 to 1 on its surface. */
:root[data-theme="fog"], [data-theme="fog"] {
  --surface-page: #eff3f6; --surface-card: #e2e9ee; --surface-sidebar: #e4ecf1;
  --ink: #0e1a24; --text-primary: #34414d; --text-secondary: #566574;
  --accent: #0a6c8f; --focus: #0a6c8f; --series-1: #4a5fd8; --series-other: #b7bff0;
  --seq-1: #edeffb; --seq-2: #d7dcf6; --seq-3: #bec5f1; --seq-4: #a1aceb; --seq-5: #8492e4; --seq-6: #7081e0; --seq-7: #4a5fd8;
  --border: #cbd6de; --sidebar-hover-bg: #d6e1e8; --bar-track: #dfe7ec; --rule: #a9b8c3; --bar-muted: #c3d0d9;
  --sidebar-text: var(--text-primary); --sidebar-label: var(--text-secondary); --sidebar-active-text: var(--ink);
}
:root[data-theme="terra"], [data-theme="terra"] {
  --surface-page: #f8f1e9; --surface-card: #efe3d5; --surface-sidebar: #f2e5d6;
  --ink: #1d1410; --text-primary: #4a3b33; --text-secondary: #6e5c52;
  --accent: #a93d1a; --focus: #a93d1a; --series-1: #1a7f9a;
  --border: #dfcfbd; --sidebar-hover-bg: #e8d6c3; --bar-track: #ecdfd0; --rule: #c4b09b; --bar-muted: #d9c8b4;
  --sidebar-text: var(--text-primary); --sidebar-label: var(--text-secondary); --sidebar-active-text: var(--ink);
}
/* The dark themes. The ink is light, so the text on an ink fill is dark, and the logo is inverted. */
:root[data-theme="night"], [data-theme="night"], :root[data-theme="midnight"], [data-theme="midnight"], :root[data-theme="charcoal"], [data-theme="charcoal"], :root[data-theme="sage"], [data-theme="sage"], :root[data-theme="ember"], [data-theme="ember"], :root[data-theme="graphite"], [data-theme="graphite"], :root[data-theme="dusk"], [data-theme="dusk"] {
  color-scheme: dark;
  --strong: #eeece6; --on-ink: #101319; --logo-filter: invert(1); --scrim: rgb(0 0 0 / 0.6);
  --stance-critical: #ef7b76; --stance-critical-strong: #ffb4ae; --stance-neutral: #8a9099; --stance-supportive: #b98ae8;
  --series-1: #38b6cf; --series-other: #2a5c68;
  /* Three slots fail 3 to 1 on a dark card, so they are lighter here. */
  --cat-6: #1f8f1f; --cat-7: #8a7cf0; --cat-9: #7d8ea6; --cat-strong: #b5b2aa;
  --notice-text: #f0d29a; --success-text: #4cc38a; --success-bg: #18281f; --success-edge: #2f5a40;
  --status-ok: #4cc38a; --status-over: #e3a43c; --status-open: #9fb0c6; --status-no: #f07c7c;
  --emph-more: #3fc2bd; --emph-less: #f08a45; --side-b: #e0803a;
  --error-text: #f08a8a; --error-bg: #2c1c1e; --error-edge: #6b3a3d; --error-ink: #f3b3b3;
  --notice-bg: #2b2519; --notice-edge: #c58a2c; --target-bg: #3a3318;
  --sidebar-text: var(--text-primary); --sidebar-label: var(--text-secondary); --sidebar-active-text: var(--ink);
}
:root[data-theme="night"], [data-theme="night"] {
  --surface-page: #121417; --surface-card: #23272d; --surface-raised: #1b1e23; --surface-sidebar: #0e1013;
  --ink: #eeece6; --text-primary: #c9ccd2; --text-secondary: #9ba1ab;
  --accent: #8db0ff; --focus: #8db0ff;
  --seq-1: #1e2d34; --seq-text-1: #ffffff; --seq-2: #213f49; --seq-text-2: #ffffff; --seq-3: #255561; --seq-text-3: #ffffff; --seq-4: #2a6d7c; --seq-text-4: #ffffff;
  --seq-5: #2d7d8f; --seq-text-5: #ffffff; --seq-6: #339eb3; --seq-text-6: #1f1f1f; --seq-7: #38b6cf; --seq-text-7: #1f1f1f;
  --border: #2f343b; --card-edge: #2f343b; --sidebar-hover-bg: #1a1d22; --bar-track: #262a30; --rule: #454b54; --bar-muted: #3a3f47;
  --skeleton: #2a2e34; --skeleton-2: #23272c; --skeleton-3: #1f2226;
}
:root[data-theme="midnight"], [data-theme="midnight"] {
  --surface-page: #0d1726; --surface-card: #1c2c45; --surface-raised: #15233a; --surface-sidebar: #09111f;
  --ink: #e6edfa; --text-primary: #c1cbe0; --text-secondary: #94a2bd;
  --accent: #6db3ff; --focus: #6db3ff;
  --seq-1: #183249; --seq-text-1: #ffffff; --seq-2: #1d435b; --seq-text-2: #ffffff; --seq-3: #225870; --seq-text-3: #ffffff; --seq-4: #276f87; --seq-text-4: #ffffff;
  --seq-5: #2b7f95; --seq-text-5: #ffffff; --seq-6: #329eb7; --seq-text-6: #1f1f1f; --seq-7: #38b6cf; --seq-text-7: #1f1f1f;
  --border: #263754; --card-edge: #263754; --sidebar-hover-bg: #111e33; --bar-track: #1f3050; --rule: #3a4e72; --bar-muted: #2b3f63;
  --skeleton: #1f3050; --skeleton-2: #19283f; --skeleton-3: #162339;
}
/* The all-dark version of the console: a dark page, slightly lighter cards, gray edges, one orange accent and gray data. The layout rules of this theme are at the end of app.css. */
:root[data-theme="charcoal"], [data-theme="charcoal"] {
  --surface-page: #121014; --surface-card: #232127; --surface-raised: #1a181d; --surface-sidebar: #121014;
  --ink: #efedf0; --strong: #efedf0; --on-ink: #121014; --text-primary: #b5b2b9; --text-secondary: #8a898f;
  --accent: #ff570a; --focus: #ff570a; --series-1: #d6d5da; --series-other: #4a494f;
  --seq-1: #26252a; --seq-text-1: #ffffff; --seq-2: #37363b; --seq-text-2: #ffffff; --seq-3: #4a494f; --seq-text-3: #ffffff; --seq-4: #5f5e65; --seq-text-4: #ffffff;
  --seq-5: #9a99a0; --seq-text-5: #1f1f1f; --seq-6: #bcbbc2; --seq-text-6: #1f1f1f; --seq-7: #e4e3e8; --seq-text-7: #1f1f1f;
  --border: #322f37; --card-edge: #322f37; --sidebar-hover-bg: #232127; --bar-track: #232127; --rule: #46454b; --bar-muted: #38373c;
  --story-follow: var(--emph-more); --story-single: #8a898f; --story-none: #46454b; --bar-rank: #6b6a70;
  --div-mid: #2a292e; --divider: 1px solid var(--border); --skeleton: #2a292e; --skeleton-2: #232227; --skeleton-3: #1e1d22;
}
/* Two trials of a near-black and sage palette. sage: all dark, with sage text and marks. moss: a sage content area between black bars. */
:root[data-theme="sage"], [data-theme="sage"] {
  --surface-page: #141414; --surface-card: #272927; --surface-raised: #1c1d1c; --surface-sidebar: #141414;
  --ink: #c9d1ca; --strong: #dfe5e0; --on-ink: #141414; --text-primary: #98a498; --text-secondary: #8f9b8f;
  --accent: #b9c6bb; --focus: #b9c6bb; --series-1: #5fb39a; --series-other: #3f5a50; --bar-rank: #6d766f;
  --story-follow: #c2a36b; --story-single: #7f9c8c; --story-none: #4f5750;
  --cat-1: #8fb0a3; --cat-2: #c98f6b; --cat-3: #a3b56f; --cat-4: #c9b26b; --cat-5: #b98fa3; --cat-6: #6f9a6f; --cat-7: #8f93b9; --cat-8: #c47f7f; --cat-9: #7f8f96;
  --seq-1: #202320; --seq-text-1: #ffffff; --seq-2: #2c312d; --seq-text-2: #ffffff; --seq-3: #3b423c; --seq-text-3: #ffffff; --seq-4: #4f5750; --seq-text-4: #ffffff;
  --seq-5: #7f8a81; --seq-text-5: #151615; --seq-6: #a3ada5; --seq-text-6: #151615; --seq-7: #c9d1ca; --seq-text-7: #151615;
  --border: #2e312e; --card-edge: #2e312e; --sidebar-hover-bg: #232523; --bar-track: #232523; --rule: #434843; --bar-muted: #3b403c;
  --div-mid: #2c2f2c; --divider: 1px solid var(--border); --skeleton: #2c2f2c; --skeleton-2: #232523; --skeleton-3: #1c1e1c;
  --act-grid: #2e312e; --act-1: #5fb39a; --act-2: #c98f6b; --act-3: #8fb0a3; --act-4: #c9b26b; --act-5: #4f5750; --act-6: #8f93b9; --act-up: #9fc4a4; --act-down: #d98f85;
}
:root[data-theme="moss"], [data-theme="moss"] {
  --surface-page: #98a498; --surface-card: #aab4aa; --surface-raised: #bcc5bc; --surface-sidebar: #bcc5bc;
  --ink: #111211; --strong: #111211; --on-ink: #dfe5e0; --text-primary: #1f2320; --text-secondary: #333834;
  --accent: #141414; --focus: #141414; --series-1: #0f5f4a; --series-other: #5f6861; --bar-rank: #5f6861;
  --story-follow: #7a3f1e; --story-single: #4f5750; --story-none: #7f8a81;
  --cat-1: #1f4d8f; --cat-2: #8f3f1a; --cat-3: #14614a; --cat-4: #7a5a0c; --cat-5: #8f2f5f; --cat-6: #2f5f1f; --cat-7: #4a3a9a; --cat-8: #8f2020; --cat-9: #2f3f4f; --cat-0: #555a56; --cat-strong: #2c302d;
  --emph-more: #0a4f4a; --emph-less: #7f3505; --error-text: #6f1515; --stance-critical: #7f1d1d; --stance-neutral: #4f5750; --stance-supportive: #4f1f63; --side-a: #1f4d8f; --side-b: #6f3a0c;
  --status-ok: #0f4a2d; --status-over: #5c3400; --status-open: #2f3f4f; --status-no: #6f1515; --success-text: #0f4a2d; --stance-critical-strong: #5a1212;
  --party-nd: #123f8f; --party-syriza: #8f1f47; --party-pasok: #0f5f2a; --party-kke: #861010; --party-el: #18284a; --party-plefsi: #4d1fa3; --party-near: #6f4404; --party-fl: #7a0f3a; --party-mera25: #055a70; --party-niki: #2f4d08;
  --border: #8f9991; --card-edge: #8f9991; --sidebar-hover-bg: #b4bdb5; --bar-track: #aeb7af; --rule: #7f8a81; --bar-muted: #8f9991;
  --div-mid: #aeb7af; --divider: 1px solid var(--border); --skeleton: #aeb7af; --skeleton-2: #b4bdb5; --skeleton-3: #bac2bb;
  --sidebar-text: var(--text-primary); --sidebar-label: var(--text-secondary); --sidebar-active-text: var(--ink);
  --seq-1: #b4bdb5; --seq-2: #9aa59c; --seq-3: #818d84; --seq-4: #5f6861; --seq-text-4: #ffffff; --seq-5: #454c47; --seq-text-5: #ffffff; --seq-6: #2c312d; --seq-text-6: #ffffff; --seq-7: #151615; --seq-text-7: #ffffff;
  --act-grid: #8f9991; --act-1: #151615; --act-2: #8f3f1a; --act-3: #14614a; --act-4: #7a5a0c; --act-5: #7f8a81; --act-6: #4a3a9a; --act-up: #0f4a2d; --act-down: #7f1d1d;
}
:root[data-theme="moss"] :is(.header-bar, .rail, .section-nav, .sidebar) {
  color-scheme: dark;
  --surface-page: #141414; --surface-card: #272927; --surface-raised: #1c1d1c; --surface-sidebar: #141414;
  --ink: #c9d1ca; --strong: #dfe5e0; --on-ink: #141414; --text-primary: #98a498; --text-secondary: #8f9b8f;
  --accent: #b9c6bb; --focus: #b9c6bb; --logo-filter: invert(1);
  --border: #2e312e; --card-edge: #2e312e; --sidebar-hover-bg: #272927;
  --sidebar-text: #98a498; --sidebar-label: #8f9b8f; --sidebar-active-text: #dfe5e0;
  --nav-pill: #98a498; --nav-pill-text: #111211;
}

/* Three dark trials with colored charts, from the palette of the Τάσεις mockup: near-black surfaces, gray edges, one orange accent, six clear chart colors.
   ember: the mockup itself. graphite: a lighter content area between near-black bars. dusk: the same idea in warm browns, with teal marks. */
:root:is([data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]), [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"] {
  --cat-1: #4a8fe6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-7: #8a7cf0; --cat-8: #39bcd1; --cat-6: #b5c94a;
  --act-2: #eb6834; --act-3: #1baf7a; --act-4: #eda100; --act-6: #8a7cf0; --act-7: #e87ba4; --act-up: #34c07f; --act-down: #f0465a;
  --story-follow: #eda100; --divider: 1px solid var(--border);
}
:root[data-theme="ember"], [data-theme="ember"] {
  --surface-page: #121014; --surface-card: #232127; --surface-raised: #1a181d; --surface-sidebar: #121014;
  --ink: #efedf0; --strong: #efedf0; --on-ink: #121014; --text-primary: #b5b2b9; --text-secondary: #8f8e94;
  --accent: #ff6a24; --focus: #ff6a24; --series-1: #5b93e6; --series-other: #2f4a73; --bar-rank: #4f6f9f; --act-1: #5b93e6; --act-5: #6b6a70; --act-grid: #322f37;
  --seq-1: #1c2330; --seq-text-1: #ffffff; --seq-2: #223049; --seq-text-2: #ffffff; --seq-3: #2a4166; --seq-text-3: #ffffff; --seq-4: #335588; --seq-text-4: #ffffff;
  --seq-5: #4472b4; --seq-text-5: #ffffff; --seq-6: #6fa0ea; --seq-text-6: #1f1f1f; --seq-7: #a4c4f3; --seq-text-7: #1f1f1f;
  --story-single: #8a898f; --story-none: #46454b;
  --border: #322f37; --card-edge: #322f37; --sidebar-hover-bg: #232127; --bar-track: #232127; --rule: #46454b; --bar-muted: #38373c;
  --div-mid: #2a292e; --skeleton: #2a292e; --skeleton-2: #232227; --skeleton-3: #1e1d22;
}
:root[data-theme="graphite"], [data-theme="graphite"] {
  --surface-page: #201f23; --surface-card: #35333a; --surface-raised: #2a282e; --surface-sidebar: #121014;
  --ink: #f4f2f5; --strong: #f4f2f5; --on-ink: #121014; --text-primary: #c9c7cd; --text-secondary: #acabb1;
  --accent: #ff8a52; --focus: #ff8a52; --series-1: #6fa3ee; --series-other: #3c5780; --bar-rank: #5f7fb0; --act-1: #6fa3ee; --act-5: #77767c; --act-grid: #3d3a42;
  --cat-1: #6fa3ee; --cat-7: #9d91f4; --side-a: #6fa3ee;
  --seq-1: #2a2f3a; --seq-text-1: #ffffff; --seq-2: #2f3a50; --seq-text-2: #ffffff; --seq-3: #35486b; --seq-text-3: #ffffff; --seq-4: #3e5a8c; --seq-text-4: #ffffff;
  --seq-5: #4472b4; --seq-text-5: #ffffff; --seq-6: #7fadef; --seq-text-6: #1f1f1f; --seq-7: #afcbf5; --seq-text-7: #1f1f1f;
  --story-single: #98979d; --story-none: #55535a;
  --border: #3d3a42; --card-edge: #3d3a42; --sidebar-hover-bg: #35333a; --bar-track: #35333a; --rule: #55535a; --bar-muted: #48464d;
  --div-mid: #35333a; --skeleton: #35333a; --skeleton-2: #2f2d33; --skeleton-3: #2a282e;
}
:root[data-theme="graphite"] :is(.header-bar, .rail, .section-nav, .sidebar) {
  --surface-page: #121014; --surface-card: #232127; --surface-raised: #1a181d;
  --border: #322f37; --card-edge: #322f37; --sidebar-hover-bg: #232127;
}
:root[data-theme="dusk"], [data-theme="dusk"] {
  --surface-page: #15110e; --surface-card: #2a241f; --surface-raised: #1f1a16; --surface-sidebar: #15110e;
  --ink: #f2ece4; --strong: #f2ece4; --on-ink: #15110e; --text-primary: #c2b8ac; --text-secondary: #9f9488;
  --accent: #ff7a2f; --focus: #ff7a2f; --series-1: #4fb8a8; --series-other: #2c5a52; --bar-rank: #47756c; --act-1: #4fb8a8; --act-5: #6f665c; --act-grid: #342c26;
  --cat-1: #4fb8a8; --cat-8: #6d9fe8;
  --seq-1: #1d2422; --seq-text-1: #ffffff; --seq-2: #20332f; --seq-text-2: #ffffff; --seq-3: #25463f; --seq-text-3: #ffffff; --seq-4: #2b5c52; --seq-text-4: #ffffff;
  --seq-5: #2f7568; --seq-text-5: #ffffff; --seq-6: #4fb8a8; --seq-text-6: #1f1f1f; --seq-7: #93d8cc; --seq-text-7: #1f1f1f;
  --story-single: #94897d; --story-none: #4d443c;
  --border: #342c26; --card-edge: #342c26; --sidebar-hover-bg: #2a241f; --bar-track: #2a241f; --rule: #4d443c; --bar-muted: #3e362f;
  --div-mid: #2e2822; --skeleton: #2e2822; --skeleton-2: #27211c; --skeleton-3: #211c18;
}

/* Secondary lines of the console themes. System fonts with Greek, because the repo has no monospace font of its own. */
:root:is([data-theme="carbon"], [data-theme="charcoal"], [data-theme="sage"], [data-theme="moss"], [data-theme="ember"], [data-theme="graphite"], [data-theme="dusk"]) { --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; }

/* The default: a dark top bar and sidebar around a white content area. The content has the light values of :root; the block after this one turns the bars dark. */
:root[data-theme="carbon"], [data-theme="carbon"] {
  --surface-page: #e9e5db; --surface-card: #dfdace; --surface-raised: #f3efe6; --surface-sidebar: #f3efe6;
  --ink: #171717; --strong: #171717; --on-ink: #f3efe6; --text-primary: #3f3f46; --text-secondary: #5f5e65;
  --accent: #a93305; --focus: #a93305; --series-1: #315cff; --series-other: #b9c6fb; --bar-rank: #9db0f7;
  --story-follow: #d9644a; --story-single: #c99a3a; --story-none: #bdb8a8;
  /* The console of Μέσα › Θέματα on the creme page. */
  --side-b: #b55a18; --act-grid: #d9d4c7; --act-1: #315cff; --act-2: #d9644a; --act-3: #2f7d66; --act-4: #c99a3a; --act-5: #bdb8a8; --act-6: #6f52d6; --act-7: #7d9cf5; --act-up: #16846b; --act-down: #c8333f;
  /* The colors of the charts of the live site. */
  --cat-1: #315cff; --cat-2: #d9644a; --cat-3: #2f7d66; --cat-4: #c99a3a; --cat-7: #6f52d6;
  --seq-1: #edf0ff; --seq-2: #d6deff; --seq-3: #b9c6fb; --seq-4: #94a8fa; --seq-5: #7089fb; --seq-text-5: #1f1f1f; --seq-6: #4466fd; --seq-text-6: #ffffff; --seq-7: #315cff; --seq-text-7: #ffffff;
  --border: #d3cec1; --card-edge: #d3cec1; --sidebar-hover-bg: #dfdace; --bar-track: #e2ddd1; --rule: #c2bcae; --bar-muted: #c4beb0;
  --divider: 1px solid var(--border);
  --sidebar-text: var(--text-primary); --sidebar-label: var(--text-secondary); --sidebar-active-text: var(--ink);
}
:root[data-theme="carbon"] :is(.header-bar, .rail, .section-nav, .sidebar) {
  color-scheme: dark;
  --surface-page: #121014; --surface-card: #232127; --surface-raised: #1a181d; --surface-sidebar: #121014;
  --ink: #efedf0; --strong: #efedf0; --on-ink: #121014; --text-primary: #b5b2b9; --text-secondary: #8a898f;
  --accent: #ff570a; --focus: #ff570a; --logo-filter: invert(1);
  --border: #322f37; --card-edge: #322f37; --sidebar-hover-bg: #232127;
  --sidebar-text: #b5b2b9; --sidebar-label: #8a898f; --sidebar-active-text: #efedf0;
  /* The current page of the sidebar is a white pill. */
  --nav-pill: #f3efe6; --nav-pill-text: #171717;
}