/* Appearance: accent colour, font, text size and colour, profit and loss colours,
   and the palette charts are drawn in (decision B215). Each is an attribute on
   <html>, set from Settings, Themes and UI, and each is a fixed list: every
   accent was checked for 4.5 to 1 against every ground it sits on.

   Light grounds are Light, Sepia and Natural gray; dark grounds are Dark and
   Cyberpunk. Cyberpunk and Monochrome keep their own accent, because their
   colour is the point of them. A PDF is always printed on a light ground. */

/* ---------------------------------------------------------------- the fonts
   Five faces under the SIL Open Font License, bundled so they work offline and
   inside a PDF: Latin, weights 400 to 700. Licences beside them in fonts/. */
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-regular.woff2") format("woff2");
             font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-bold.woff2") format("woff2");
             font-weight: 600 700; font-display: swap; }

[data-font="open_sans"] { --font: "Open Sans", system-ui, "Segoe UI", Roboto, sans-serif; }
[data-font="inter"] { --font: "Inter", system-ui, "Segoe UI", Roboto, sans-serif; }
[data-font="source_sans_3"] { --font: "Source Sans 3", system-ui, "Segoe UI", Roboto, sans-serif; }
[data-font="ibm_plex_sans"] { --font: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif; }
[data-font="lato"] { --font: "Lato", system-ui, "Segoe UI", Roboto, sans-serif; }

[data-font="system"] { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* The root carries the face too: a PDF's running footer and page count belong
   to the page, not the body, and printed in a serif until they inherited it. */
html { font-family: var(--font); }

/* ---------------------------------------------------------- the text size
   The whole page is sized in rem, so the root carries the choice. */
html[data-size="small"] { font-size: 93.75%; }
html[data-size="large"] { font-size: 110%; }
html[data-size="larger"] { font-size: 120%; }

/* ------------------------------------------------------------ the accents */
[data-accent="blue"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #1f5fae; --accent-soft: rgba(31, 95, 174, .12); }
[data-accent="teal"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #0b6e79; --accent-soft: rgba(11, 110, 121, .12); }
[data-accent="indigo"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #4338ca; --accent-soft: rgba(67, 56, 202, .11); }
[data-accent="plum"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #7b3f98; --accent-soft: rgba(123, 63, 152, .11); }
[data-accent="graphite"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #3f4a58; --accent-soft: rgba(63, 74, 88, .11); }
[data-accent="amber"]:not([data-theme="dark"], [data-theme="cyberpunk"], [data-theme="monochrome"]) {
  --accent: #95560a; --accent-soft: rgba(149, 86, 10, .12); }
/* Green on Sepia and Natural gray is the Light theme's green, the colour asked for. */
[data-accent="green"]:is([data-theme="sepia"], [data-theme="natural_gray"]) {
  --accent: #1f6f5c; --accent-soft: rgba(31, 111, 92, .12); }

[data-theme="dark"][data-accent="blue"] { --accent: #6aa8f7; --accent-soft: rgba(106, 168, 247, .15); }
[data-theme="dark"][data-accent="teal"] { --accent: #3cc3cf; --accent-soft: rgba(60, 195, 207, .14); }
[data-theme="dark"][data-accent="indigo"] { --accent: #9a9df8; --accent-soft: rgba(154, 157, 248, .15); }
[data-theme="dark"][data-accent="plum"] { --accent: #c996e3; --accent-soft: rgba(201, 150, 227, .15); }
[data-theme="dark"][data-accent="graphite"] { --accent: #b0bac8; --accent-soft: rgba(176, 186, 200, .14); }
[data-theme="dark"][data-accent="amber"] { --accent: #f0b24a; --accent-soft: rgba(240, 178, 74, .14); }

/* ---------------------------------------------------------- the text colour */
[data-ink="strong"]:not([data-theme="dark"], [data-theme="cyberpunk"]) { --ink: #000000; --muted: #4b5058; }
[data-ink="soft"]:not([data-theme="dark"], [data-theme="cyberpunk"]) { --ink: #3b3f45; }
[data-ink="strong"]:is([data-theme="dark"], [data-theme="cyberpunk"]) { --ink: #ffffff; --muted: #c3c8cf; }
[data-ink="soft"]:is([data-theme="dark"], [data-theme="cyberpunk"]) { --ink: #c9ccd2; }

/* ------------------------------------------------ profit and loss colours
   Blue and orange read apart under every common colour blindness, where green
   and red are the pair most often confused. Bars, the calendar and every figure
   follow --up and --down. */
[data-pnl="blue_orange"]:not([data-theme="dark"], [data-theme="cyberpunk"]) { --up: #0a66b8; --down: #a94400; }
[data-pnl="blue_orange"]:is([data-theme="dark"], [data-theme="cyberpunk"]) { --up: #5aa9f0; --down: #f0883e; }

/* ----------------------------------------------------- the chart palette
   Eight colours for series that are not profit or loss: instruments,
   strategies, sessions, currencies. */
:root, [data-palette="balanced"] {
  --series-0: #2f6fc4; --series-1: #d0761b; --series-2: #2e8b57; --series-3: #c2415a;
  --series-4: #7254c4; --series-5: #1f8f93; --series-6: #a8841a; --series-7: #6f747c; }
[data-palette="balanced"]:is([data-theme="dark"], [data-theme="cyberpunk"]) {
  --series-0: #6ea8f5; --series-1: #f0a24a; --series-2: #5cc98d; --series-3: #ee7a8c;
  --series-4: #a78bf0; --series-5: #4fc4c7; --series-6: #e0c052; --series-7: #a3a8b0; }
/* Okabe and Ito's eight, the published set for colour blindness. */
[data-palette="colour_blind"] {
  --series-0: #0072b2; --series-1: #e69f00; --series-2: #009e73; --series-3: #cc79a7;
  --series-4: #56b4e9; --series-5: #d55e00; --series-6: #999999; --series-7: #f0e442; }
/* IBM's Carbon design system, categorical, in its light and dark orders. */
[data-palette="carbon"] {
  --series-0: #6929c4; --series-1: #1192e8; --series-2: #005d5d; --series-3: #9f1853;
  --series-4: #fa4d56; --series-5: #570408; --series-6: #198038; --series-7: #002d9c; }
[data-palette="carbon"]:is([data-theme="dark"], [data-theme="cyberpunk"]) {
  --series-0: #8a3ffc; --series-1: #33b1ff; --series-2: #007d79; --series-3: #ff7eb6;
  --series-4: #fa4d56; --series-5: #fff1f1; --series-6: #6fdc8c; --series-7: #4589ff; }
[data-palette="greys"] {
  --series-0: #1f1f1f; --series-1: #6e6e6e; --series-2: #a8a8a8; --series-3: #454545;
  --series-4: #8a8a8a; --series-5: #c4c4c4; --series-6: #2f2f2f; --series-7: #9a9a9a; }
[data-palette="greys"]:is([data-theme="dark"], [data-theme="cyberpunk"]) {
  --series-0: #f2f2f2; --series-1: #b8b8b8; --series-2: #808080; --series-3: #d8d8d8;
  --series-4: #9c9c9c; --series-5: #6a6a6a; --series-6: #e4e4e4; --series-7: #8c8c8c; }

.line-0 { stroke: var(--series-0); } .line-1 { stroke: var(--series-1); }
.line-2 { stroke: var(--series-2); } .line-3 { stroke: var(--series-3); }
.line-4 { stroke: var(--series-4); } .line-5 { stroke: var(--series-5); }
.line-6 { stroke: var(--series-6); } .line-7 { stroke: var(--series-7); }
.slice-0 { stroke: var(--series-0); } .slice-1 { stroke: var(--series-1); }
.slice-2 { stroke: var(--series-2); } .slice-3 { stroke: var(--series-3); }
.slice-4 { stroke: var(--series-4); } .slice-5 { stroke: var(--series-5); }
.key-0 { background: var(--series-0); } .key-1 { background: var(--series-1); }
.key-2 { background: var(--series-2); } .key-3 { background: var(--series-3); }
.key-4 { background: var(--series-4); } .key-5 { background: var(--series-5); }
.key-6 { background: var(--series-6); } .key-7 { background: var(--series-7); }
/* Won, lost, scratched are profit and loss, never a series colour. */
.outcome .slice-0 { stroke: var(--up); } .outcome .slice-1 { stroke: var(--down); }
.outcome .slice-2 { stroke: var(--muted); }
.outcome .key-0 { background: var(--up); } .outcome .key-1 { background: var(--down); }
.outcome .key-2 { background: var(--muted); }

/* ------------------------------------------------ Settings, Themes and UI */
.choice-grid { display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
main form label.choice { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
main form label.choice input { width: auto; margin: 0; }
.accent-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); flex: none; }
.font-sample { font-family: var(--font); font-size: 1rem; }
.pnl-sample, .palette-sample { display: inline-flex; gap: 3px; flex: none; }
.pnl-sample i { width: .9rem; height: .9rem; border-radius: 3px; }
.pnl-sample .up { background: var(--up); } .pnl-sample .down { background: var(--down); }
.palette-sample .key { width: .55rem; height: .9rem; border-radius: 2px; }
.appearance-sections { min-width: 0; }
.appearance-preview-wrap { max-width: 560px; }
.appearance-pair { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.appearance-preview { font-family: var(--font); color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.appearance-preview p { margin: 4px 0; }
.appearance-preview .muted { color: var(--muted); }
.appearance-preview .won { color: var(--up); font-weight: 600; }
.appearance-preview .lost { color: var(--down); font-weight: 600; }
.preview-title { font-size: 1.1rem; font-weight: 650; }
.preview-link { color: var(--accent); text-decoration: underline; margin-right: 12px; }
.preview-button { background: var(--accent); color: var(--panel); border-color: var(--accent); }
.preview-series { display: flex; align-items: center; gap: 4px; }

/* --------------------------------------------------------------- the PDF */
@media print {
  [data-size="small"] body { font-size: 9pt; }
  [data-size="large"] body { font-size: 10.5pt; }
  [data-size="larger"] body { font-size: 11.5pt; }
  [data-ink="strong"] body { color: #000; }
  [data-ink="soft"] body { color: #333; }
}