/* The theme's tokens - every colour (and the reading widths) of SchoolDesk, light and dark. Loaded first, by
   Views/Shared/_StylesheetsDore.cshtml, so every page has them (the old pages' sdbase.css and the new theme's
   sdtheme.css both read them). Moved out of sdtheme.css 2026-10-10. */
/* Colours: every colour of the new theme is a token here. The BRAND pair is the source - green (--sd-primary) and
   yellow (--sd-accent); the older names (--sd-green, --sd-icon-*, --sd-yellow ..) are aliases of them, so a page
   written with either follows one change here. Module CSS (sdcss/*) uses only var(--sd-...), never a hex.
   Dark theme: the same tokens, given dark values further down under :root[data-theme="dark"]. A page made only of
   tokens turns dark by itself. The dark theme is opt-in (see _Layout's head script, sdTheme in sdjs/sdtheme.js)
   until the old CSS (Dore, customs.css, inline styles) is ready - the audit is docs/dark-theme-audit.md. */
:root {
    color-scheme: light;
    /* the brand's two colours as full scales, 50 (palest) .. 900 (deepest) - the same in both themes; pick a step
       when a shade is needed (a chart's bars, a badge, a ring), and name it as a token below when it means something.
       Green: 500 is the brand green, 600 its hover, 50 its soft box. Yellow: 500 is the brand yellow, 100 its soft box. */
    --sd-green-50: #eaf8f2;  --sd-green-100: #d7efe4;  --sd-green-200: #b3dfcb;  --sd-green-300: #86c9ad;  --sd-green-400: #5cb08e;
    --sd-green-500: #3e8f70; --sd-green-600: #32765d;  --sd-green-700: #285e4a;  --sd-green-800: #1e4738;  --sd-green-900: #143026;
    --sd-yellow-50: #fffbea; --sd-yellow-100: #fff8d6; --sd-yellow-200: #ffeea3; --sd-yellow-300: #ffe270; --sd-yellow-400: #ffd43b;
    --sd-yellow-500: #ffca08; --sd-yellow-600: #e0ad00; --sd-yellow-700: #b38a00; --sd-yellow-800: #7a5a00; --sd-yellow-900: #4d3900;
    /* the brand palette - what each shade is for */
    --sd-primary: var(--sd-green-500);        /* green: buttons, links, the open state's edge */
    --sd-primary-hover: var(--sd-green-600);  /* green, darker: hover; text and icons on a soft green */
    --sd-primary-soft: var(--sd-green-50);    /* a soft green box: icon tiles, chips, a good message */
    --sd-primary-rgb: 62,143,112;  /* the green as numbers, for see-through shades: rgba(var(--sd-primary-rgb), .2) */
    --sd-accent: var(--sd-yellow-500);        /* yellow: a chosen day, what wants attention (due, soon, pinned) */
    --sd-accent-soft: var(--sd-yellow-100);   /* a soft yellow box */
    --sd-accent-fg: var(--sd-yellow-800);     /* text on the soft yellow */
    --sd-on-accent: #1d1d1d;       /* text on a filled yellow (white does not read on it) */
    /* the older names - aliases of the brand */
    --sd-green: var(--sd-primary);
    --sd-green-light: var(--sd-primary);
    --sd-green-dark: var(--sd-primary-hover);
    --sd-green-soft: rgba(var(--sd-primary-rgb), .18);   /* a chosen row, an open button */
    --sd-ring: rgba(var(--sd-primary-rgb), .40);         /* the focus / open ring */
    --sd-icon-bg: var(--sd-primary-soft);                /* icon tiles: light green */
    --sd-icon-bg-hover: var(--sd-green-100);
    --sd-icon-fg: var(--sd-primary-hover);               /* the icon on its tile */
    /* an image icon (a menu / alert .png) tinted to --sd-icon-fg: a filter cannot read a token, so each colour (and
       the dark theme) sets its own - images go black, then this chain turns black into the colour */
    --sd-icon-filter: brightness(0) saturate(100%) invert(36%) sepia(53%) saturate(560%) hue-rotate(108deg) brightness(91%) contrast(88%);
    --sd-yellow: var(--sd-accent);                       /* SdColors.primaryYellow - a chosen day */
    --sd-scroll-thumb: var(--sd-green-200);   /* the scrollbar grip, everywhere (sdscroll.css) - light green */
    --sd-scroll-thumb-hover: var(--sd-primary-hover);
    /* surfaces and text */
    --sd-bg: #f0f2f5;              /* the page behind the cards */
    --sd-card: #fff;               /* a card's face */
    --sd-card-2: #fafafb;          /* a table's header row, a quiet strip in a card */
    --sd-glass: rgba(255,255,255,.92);   /* a small label or button floating over a picture */
    --sd-soft: #f2f2f4;            /* a soft grey chip or box */
    --sd-row-hover: #f7f9f8;       /* a row under the mouse, a chosen row */
    --sd-row-on: var(--sd-green-50);          /* a chosen card */
    --sd-text: #1d1d1d;            /* SdColors.textPrimary */
    --sd-text-2: #4b4f56;          /* text on a soft grey chip */
    --sd-text-3: #65676b;          /* secondary text: meta lines, table heads */
    --sd-muted: #8a8d91;           /* captions, other months */
    --sd-line: #f0f2f5;            /* a thin line between rows */
    --sd-border: #e4e6eb;          /* a box's edge */
    --sd-border-hover: var(--sd-green-100);   /* a card's edge under the mouse */
    --sd-on-color: #fff;           /* text on a filled green */
    --sd-shadow: rgba(0,0,0,.16);  /* edge shadows, lifted cards */
    --sd-shadow-soft: rgba(0,0,0,.08);
    --sd-shadow-faint: rgba(0,0,0,.05);  /* the lift of a card on the page */
    --sd-glow: rgba(255,255,255,.75);    /* a soft white highlight in a shadow (old pages' raised boxes) */
    --sd-overlay: rgba(0,0,0,.35); /* the dim behind a drawer or popup */
    --sd-scrim: rgba(0,0,0,.6);    /* a darker dim: behind the file viewer, a label over a page */
    --sd-paper: #fff;              /* a document's page (the file viewer) - white in the dark theme too */
    --sd-glass-bar: rgba(255,255,255,.62);   /* the frosted bottom bar */
    --sd-glass-edge: rgba(255,255,255,.7);
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar: the green (the person's colour), its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-line: transparent;
    --sd-topbar-avatar: var(--sd-green-700);   /* the profile picture's hexagon on the top bar (no photo) - a deeper shade */
    --sd-mark: #c7c7cc;            /* quiet marks: chevrons, empty stars, drag grips */
    --sd-switch-off: #d0d3d8;      /* a switch that is off */
    /* states */
    --sd-danger: #d93025;          /* delete, an error */
    --sd-danger-soft: #fdecea;
    --sd-danger-glow: rgba(217,48,37,.25);   /* the red close button's shadow */
    --sd-danger-line: #f4ccd3;
    --sd-danger-bg: #fff6f7;       /* a card past its date */
    --sd-ok: #1f8a4c;              /* done / accepted (a policy accepted) */
    --sd-ok-soft: #e6f6ed;
    --sd-warn-bg: var(--sd-yellow-50);        /* a card coming due */
    --sd-warn-line: var(--sd-yellow-200);
    --sd-track-bg: var(--sd-green-50);        /* a card being tracked */
    --sd-info: #3195a5;            /* an information note or badge (old pages) - teal */
    --sd-info-soft: #d0e4e7;
    --sd-heart: #e0556b;           /* a liked post's heart (the feed) */
    --sd-heart-soft: rgba(224,85,107,.12);
    --sd-tag: #2196f3;             /* # tags (schools, roles) - blue, as on the Victory Circle feed */
    --sd-tag-light: #64b5f6;       /* # tags in a quiet line under a row (a staff holiday's service types) - light blue */
    /* the Pro app's colours (org.schooldesk.pro SdColors) for days and dates - calendar (sdcalendar.css) and anywhere else */
    --sd-holiday: #e23b08;         /* SdColors.holiday - holidays, Sat / Sun named */
    --sd-weekoff: #c68672;         /* SdColors.primaryRed - week offs */
    --sd-holiday-soft: #fbe3e3;    /* a holiday's chip */
    --sd-today-soft: #eaf8ea;      /* SdColors.cardBackground - today's row */
    /* file types (document cards): the type's colour and its soft box */
    --sd-k-pdf: #d93025;  --sd-k-pdf-bg: #fdecea;
    --sd-k-img: #8e44ad;  --sd-k-img-bg: #f3e8fd;
    --sd-k-xls: #1e7e4f;  --sd-k-xls-bg: #e3f4ec;
    --sd-k-doc: #2a62c9;  --sd-k-doc-bg: #e7f0fe;
    --sd-k-ppt: #d4691e;  --sd-k-ppt-bg: #fff0e3;
    --sd-k-zip: #5f6368;  --sd-k-zip-bg: #f2f2f4;
    --sd-k-vid: #c2185b;  --sd-k-vid-bg: #fde7f1;
    --sd-k-aud: #4a55c2;  --sd-k-aud-bg: #eef0fe;
    /* sizes */
    --sd-page-width: 720px;        /* a page's reading width (lists, feeds, filters, the menu) */
    --sd-page-full: 1920px;        /* the widest a full-width block goes: a Full HD screen (filters inside the block, .sd-inline) */
    --sd-page-narrow: 560px;       /* a narrow page (the profile) */
}
/* The dark theme: the same tokens, dark. Chosen by <html data-theme="dark"> - set before the page draws by the
   head script in _Layout (localStorage sdTheme: light / dark / auto; auto follows the device). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --sd-primary: var(--sd-green-400);        /* the green, lifted a step to read on dark */
    --sd-primary-hover: var(--sd-green-300);
    --sd-icon-filter: brightness(0) saturate(100%) invert(79%) sepia(16%) saturate(720%) hue-rotate(100deg) brightness(95%) contrast(88%);   /* --sd-icon-fg (green-300) */
    --sd-primary-soft: var(--sd-green-900);
    --sd-primary-rgb: 92,176,142;
    --sd-accent: var(--sd-yellow-400);
    --sd-accent-soft: #3a3214;
    --sd-accent-fg: var(--sd-yellow-300);
    --sd-on-accent: #1d1d1d;
    --sd-icon-bg-hover: var(--sd-green-800);
    --sd-scroll-thumb: var(--sd-green-700);
    --sd-bg: #18191a;
    --sd-card: #242526;
    --sd-card-2: #2c2d2f;
    --sd-glass: rgba(36,37,38,.92);
    --sd-soft: #3a3b3c;
    --sd-row-hover: #2b302e;
    --sd-row-on: #22332c;
    --sd-text: #e4e6eb;
    --sd-text-2: #c9ccd1;
    --sd-text-3: #b0b3b8;
    --sd-muted: #8a8d91;
    --sd-line: #333436;
    --sd-border: #3e4042;
    --sd-border-hover: var(--sd-green-700);
    --sd-on-color: var(--sd-green-900);       /* dark text on the lighter dark-theme green */
    --sd-shadow: rgba(0,0,0,.55);
    --sd-shadow-soft: rgba(0,0,0,.35);
    --sd-shadow-faint: rgba(0,0,0,.3);
    --sd-glow: rgba(255,255,255,.04);
    --sd-overlay: rgba(0,0,0,.55);
    --sd-glass-bar: rgba(36,37,38,.72);
    --sd-glass-edge: rgba(255,255,255,.08);
    --sd-topbar-bg: var(--sd-card);     /* dark: a dark bar, the green kept as its line */
    --sd-topbar-fg: var(--sd-text);
    --sd-topbar-line: var(--sd-primary);
    --sd-topbar-avatar: var(--sd-primary);
    --sd-mark: #5f6266;
    --sd-switch-off: #4e5053;
    --sd-danger: #f28b82;
    --sd-danger-soft: #3c2422;
    --sd-danger-glow: rgba(242,139,130,.25);
    --sd-danger-line: #6b3a37;
    --sd-danger-bg: #2e2224;
    --sd-ok: #81c995;
    --sd-ok-soft: #1e3326;
    --sd-warn-bg: #2f2a1b;
    --sd-warn-line: #5e5126;
    --sd-track-bg: #1f2c27;
    --sd-info: #5fb8c6;
    --sd-info-soft: #1d3236;
    --sd-heart: #f07a8d;
    --sd-heart-soft: rgba(240,122,141,.16);
    --sd-tag: #64b5f6;
    --sd-tag-light: #90caf9;
    --sd-holiday: #ff7a52;
    --sd-weekoff: #d9a08f;
    --sd-holiday-soft: #3d2420;
    --sd-today-soft: #1f3324;
    --sd-k-pdf: #f28b82;  --sd-k-pdf-bg: #3c2422;
    --sd-k-img: #c58af0;  --sd-k-img-bg: #33263d;
    --sd-k-xls: #6fcf97;  --sd-k-xls-bg: #1f3329;
    --sd-k-doc: #8ab4f8;  --sd-k-doc-bg: #1f2a3d;
    --sd-k-ppt: #f0a35e;  --sd-k-ppt-bg: #3b2a1c;
    --sd-k-zip: #b0b3b8;  --sd-k-zip-bg: #3a3b3c;
    --sd-k-vid: #f48fb1;  --sd-k-vid-bg: #3b2230;
    --sd-k-aud: #9fa8f5;  --sd-k-aud-bg: #262a42;
}
/* The person's colour (Settings > Colour, html[data-color] written by _Layout - Utilities/UserLook.cs). Green, the
   brand, is the default and keeps the :root scale. Every other choice is a colour the theme already has (a file
   type's or the info colour), made into a full 50..900 scale that takes the green scale's place - so everything built from the
   tokens (buttons, tiles, rings, chosen rows, scrollbars) follows, light and dark. The top bar takes the colour too
   (dark theme: its line); the yellow bar has dark words. The accent yellow (a chosen day, badges) stays.
   A choice's own dot on the Settings page: --sd-pick-* (never remapped). */
:root {
    --sd-pick-green: #3e8f70; --sd-pick-yellow: #ffca08; --sd-pick-blue: #2a62c9; --sd-pick-teal: #3195a5; --sd-pick-indigo: #4a55c2;
    --sd-pick-purple: #8e44ad; --sd-pick-rose: #c2185b; --sd-pick-orange: #d4691e;
}
:root[data-color="yellow"] {   /* Yellow - the brand's second colour (--sd-accent). Fills are the bright yellow with dark
                                  text (white does not read on it); the hover and text shade is a deeper gold */
    --sd-icon-filter: brightness(0) saturate(100%) invert(41%) sepia(97%) saturate(2598%) hue-rotate(32deg) brightness(97%) contrast(101%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: var(--sd-yellow-50); --sd-green-100: var(--sd-yellow-100); --sd-green-200: var(--sd-yellow-200); --sd-green-300: var(--sd-yellow-300); --sd-green-400: var(--sd-yellow-400);
    --sd-green-500: var(--sd-yellow-500); --sd-green-600: #a07a00; --sd-green-700: var(--sd-yellow-800); --sd-green-800: #5e4500; --sd-green-900: var(--sd-yellow-900);
    --sd-primary-rgb: 255,202,8;
    --sd-on-color: var(--sd-on-accent);
    --sd-topbar-fg: var(--sd-text);   /* the yellow bar: dark words and icons */
    --sd-topbar-avatar: var(--sd-green-700);   /* the profile hexagon a deep gold on it */
}
:root[data-theme="dark"][data-color="yellow"] { --sd-icon-filter: brightness(0) saturate(100%) invert(96%) sepia(84%) saturate(5445%) hue-rotate(309deg) brightness(114%) contrast(105%); --sd-primary-rgb: 255,212,59; --sd-on-color: var(--sd-green-900); --sd-topbar-avatar: var(--sd-primary); --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); }
:root:not([data-theme="dark"]):not([data-color]), :root:not([data-theme="dark"])[data-color="green"] {
    /* TEMPORARY (2026-10-22): green shows the brand-yellow top bar (and menu head), as yellow does - remove this block
       to give green its green bar back */
    --sd-topbar-bg: var(--sd-accent);
    --sd-topbar-fg: var(--sd-text);
    --sd-topbar-avatar: var(--sd-primary);
}
:root[data-color="blue"] {   /* Blue - the colour of --sd-k-doc */
    --sd-icon-filter: brightness(0) saturate(100%) invert(22%) sepia(73%) saturate(1888%) hue-rotate(205deg) brightness(94%) contrast(89%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #eaeffa; --sd-green-100: #d4e0f4; --sd-green-200: #aec3ea; --sd-green-300: #83a4e0; --sd-green-400: #5581d4;
    --sd-green-500: #2a62c9; --sd-green-600: #2250a5; --sd-green-700: #1b4083; --sd-green-800: #142f60; --sd-green-900: #0d1f40;
    --sd-primary-rgb: 42,98,201;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="blue"] { --sd-icon-filter: brightness(0) saturate(100%) invert(77%) sepia(26%) saturate(3589%) hue-rotate(187deg) brightness(94%) contrast(86%); --sd-primary-rgb: 85,129,212; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
:root[data-color="teal"] {   /* Teal - the colour of --sd-info */
    --sd-icon-filter: brightness(0) saturate(100%) invert(41%) sepia(7%) saturate(6214%) hue-rotate(140deg) brightness(88%) contrast(69%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #eaf4f6; --sd-green-100: #d6eaed; --sd-green-200: #b1d7dd; --sd-green-300: #88c2cb; --sd-green-400: #5aaab7;
    --sd-green-500: #3195a5; --sd-green-600: #287a87; --sd-green-700: #20616b; --sd-green-800: #18484f; --sd-green-900: #103035;
    --sd-primary-rgb: 49,149,165;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="teal"] { --sd-icon-filter: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(1176%) hue-rotate(140deg) brightness(91%) contrast(85%); --sd-primary-rgb: 90,170,183; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
:root[data-color="indigo"] {   /* Indigo - the colour of --sd-k-aud */
    --sd-icon-filter: brightness(0) saturate(100%) invert(24%) sepia(65%) saturate(1507%) hue-rotate(216deg) brightness(90%) contrast(90%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #edeef9; --sd-green-100: #dbddf3; --sd-green-200: #babee8; --sd-green-300: #969cdc; --sd-green-400: #6e77ce;
    --sd-green-500: #4a55c2; --sd-green-600: #3d469f; --sd-green-700: #30377e; --sd-green-800: #24295d; --sd-green-900: #181b3e;
    --sd-primary-rgb: 74,85,194;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="indigo"] { --sd-icon-filter: brightness(0) saturate(100%) invert(69%) sepia(7%) saturate(2174%) hue-rotate(198deg) brightness(92%) contrast(86%); --sd-primary-rgb: 110,119,206; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
:root[data-color="purple"] {   /* Purple - the colour of --sd-k-img */
    --sd-icon-filter: brightness(0) saturate(100%) invert(27%) sepia(62%) saturate(911%) hue-rotate(244deg) brightness(90%) contrast(93%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #f4ecf7; --sd-green-100: #e8daef; --sd-green-200: #d4b8e0; --sd-green-300: #bd93cf; --sd-green-400: #a569bd;
    --sd-green-500: #8e44ad; --sd-green-600: #74388e; --sd-green-700: #5c2c70; --sd-green-800: #442153; --sd-green-900: #2d1637;
    --sd-primary-rgb: 142,68,173;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="purple"] { --sd-icon-filter: brightness(0) saturate(100%) invert(78%) sepia(69%) saturate(1219%) hue-rotate(201deg) brightness(87%) contrast(84%); --sd-primary-rgb: 165,105,189; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
:root[data-color="rose"] {   /* Rose - the colour of --sd-k-vid */
    --sd-icon-filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(6401%) hue-rotate(324deg) brightness(81%) contrast(95%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #f9e8ef; --sd-green-100: #f3d1de; --sd-green-200: #e8a7c1; --sd-green-300: #dc79a0; --sd-green-400: #ce467c;
    --sd-green-500: #c2185b; --sd-green-600: #9f144b; --sd-green-700: #7e103b; --sd-green-800: #5d0c2c; --sd-green-900: #3e081d;
    --sd-primary-rgb: 194,24,91;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="rose"] { --sd-icon-filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(6611%) hue-rotate(291deg) brightness(89%) contrast(93%); --sd-primary-rgb: 206,70,124; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
:root[data-color="orange"] {   /* Orange - the colour of --sd-k-ppt */
    --sd-icon-filter: brightness(0) saturate(100%) invert(33%) sepia(93%) saturate(622%) hue-rotate(345deg) brightness(96%) contrast(92%);   /* --sd-icon-fg (green-600) */
    --sd-green-50: #fbf0e8; --sd-green-100: #f6e1d2; --sd-green-200: #efc6aa; --sd-green-300: #e6a87c; --sd-green-400: #dd874b;
    --sd-green-500: #d4691e; --sd-green-600: #ae5619; --sd-green-700: #8a4414; --sd-green-800: #66320e; --sd-green-900: #44220a;
    --sd-primary-rgb: 212,105,30;
    --sd-topbar-bg: var(--sd-green-500);   /* the top bar in the colour, its words and icons white */
    --sd-topbar-fg: var(--sd-on-color);
    --sd-topbar-avatar: var(--sd-green-700);   /* a deeper shade, so it shows on the bar */
}
:root[data-theme="dark"][data-color="orange"] { --sd-icon-filter: brightness(0) saturate(100%) invert(69%) sepia(58%) saturate(289%) hue-rotate(342deg) brightness(93%) contrast(94%); --sd-primary-rgb: 221,135,75; --sd-row-on: color-mix(in srgb, var(--sd-green-500) 20%, var(--sd-card)); --sd-row-hover: color-mix(in srgb, var(--sd-green-500) 9%, var(--sd-card)); --sd-track-bg: color-mix(in srgb, var(--sd-green-500) 14%, var(--sd-card)); --sd-topbar-bg: var(--sd-card); --sd-topbar-fg: var(--sd-text); --sd-topbar-line: var(--sd-primary); --sd-topbar-avatar: var(--sd-primary); }
/* the page itself in the dark theme (the light page's colours come from the old CSS) */
:root[data-theme="dark"] body { background-color: var(--sd-bg); color: var(--sd-text); }
/* THEME RULE - text highlighted with the mouse, on every page of the theme (light and dark): a see-through
   shade of the brand green over the page, and the text keeps its own colour. Never a fixed light colour here or
   in a module's CSS - light text on a light highlight cannot be read in the dark theme. */
::selection { background: rgba(var(--sd-primary-rgb), .38); color: inherit; }
::-moz-selection { background: rgba(var(--sd-primary-rgb), .38); color: inherit; }