/* Ogstel desk design tokens. Every colour, size, space, radius and density value lives here.
   Light is the default. Dark follows the computer unless [data-theme] says otherwise.
   Compact density: [data-density="compact"]. Looks: [data-look="classic" | "modern"]. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2")}

:root{
  color-scheme:light dark;
  /* type */
  --font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --fs-base:17px; --fs-sm:15px; --fs-xs:14px; --fs-lg:19px; --fs-xl:22px; --fs-h1:30px; --lh:1.5;
  /* space */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --row-pad:14px; --gap:16px;
  --target:44px;
  /* radii and depth */
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(35,47,85,.06),0 6px 18px rgba(35,47,85,.06);
  --border-w:1px;
  /* layout */
  --sidebar-w:260px; --rail-w:340px;

  /* colour: light */
  --bg:#EDEFF5; --rail:#E5E8F0; --panel:#FFFFFF; --panel2:#F5F6FA; --paper:#FFFFFF;
  --ink:#1E2330; --ink2:#565D6E; --line:#DADEE8; --line-strong:#B9BFCD;
  --primary:#232F55; --primary-ink:#FFFFFF;
  --accent:#5B55A8; --accent-soft:#E8E6F5;
  --sel:#FFFFFF; --stage:#E3E6EF; --stage-on:#232F55; --stage-on-ink:#FFFFFF;
  --ok:#1E6B37; --ok-soft:#E1F1E6; --warn:#8A5300; --warn-soft:#FBEBD0;
  --del:#A3271D; --ins:#234A8C; --info:#1F5E8C;
  --note-peach:#FADBD1; --note-blue:#D6E4FA; --note-yellow:#F9EDBE; --note-mint:#CFEEDD; --note-ink:#2A2418;
  --tint-violet:#E8E6F5; --tint-green:#DDF0E5; --tint-amber:#F8E8CD; --tint-blue:#DCE8F8; --tint-rose:#F7DEE0;
  --focus:#C98A00;
  --scrim:rgba(30,35,48,.45);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    --bg:#15181F; --rail:#1B1F28; --panel:#1F242E; --panel2:#252B36; --paper:#232933;
    --ink:#E6E8EE; --ink2:#A9B0BF; --line:#343B49; --line-strong:#4A5365;
    --primary:#C9D1F5; --primary-ink:#151B33;
    --accent:#B1ACEC; --accent-soft:#2C2B4A;
    --sel:#2A3140; --stage:#2A303C; --stage-on:#C9D1F5; --stage-on-ink:#151B33;
    --ok:#8FD0A2; --ok-soft:#1F3328; --warn:#E7B76A; --warn-soft:#3A2E1A;
    --del:#F0968C; --ins:#9DB8EA; --info:#8EC3EA;
    --note-peach:#4A2F2B; --note-blue:#273650; --note-yellow:#463F20; --note-mint:#25402F; --note-ink:#F0EDE4;
    --tint-violet:#2C2B4A; --tint-green:#1F3328; --tint-amber:#3A2E1A; --tint-blue:#273650; --tint-rose:#46282C;
    --focus:#F0B52A;
    --scrim:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  --bg:#15181F; --rail:#1B1F28; --panel:#1F242E; --panel2:#252B36; --paper:#232933;
  --ink:#E6E8EE; --ink2:#A9B0BF; --line:#343B49; --line-strong:#4A5365;
  --primary:#C9D1F5; --primary-ink:#151B33;
  --accent:#B1ACEC; --accent-soft:#2C2B4A;
  --sel:#2A3140; --stage:#2A303C; --stage-on:#C9D1F5; --stage-on-ink:#151B33;
  --ok:#8FD0A2; --ok-soft:#1F3328; --warn:#E7B76A; --warn-soft:#3A2E1A;
  --del:#F0968C; --ins:#9DB8EA; --info:#8EC3EA;
  --note-peach:#4A2F2B; --note-blue:#273650; --note-yellow:#463F20; --note-mint:#25402F; --note-ink:#F0EDE4;
  --tint-violet:#2C2B4A; --tint-green:#1F3328; --tint-amber:#3A2E1A; --tint-blue:#273650; --tint-rose:#46282C;
  --focus:#F0B52A;
  --scrim:rgba(0,0,0,.6);
}

/* Compact density: smaller type and tighter rows, for people who want more on screen. */
:root[data-density="compact"]{
  --fs-base:15px; --fs-sm:14px; --fs-xs:13px; --fs-lg:17px; --fs-xl:19px; --fs-h1:26px;
  --row-pad:8px; --gap:12px; --target:36px;
}

/* Looks (Classic, Balanced is the default, Modern). They change corners and depth only. */
:root[data-look="classic"]{--r-sm:2px;--r-md:3px;--r-lg:4px;--shadow:none;--border-w:2px}
:root[data-look="modern"]{--r-sm:8px;--r-md:14px;--r-lg:22px;--shadow:0 2px 4px rgba(35,47,85,.06),0 14px 32px rgba(35,47,85,.10)}