/* theme.css - the light theme, as a token set. * ================================================================== * * "Slate & Sky", built from a palette the user supplied: * * #2C3E50 #AADEEE #F39C12 #BBBBBB #AAAAAA * * Ground rule: the page is classic white - #FFF page, #FFF panels, a * panel separated from the page by its border, not by tone. * * Dark mode was removed 2026-09-16; the site is light only. The light * block is on bare :root AND on html[data-dir="light-broadsheet"], which * themedir.asp still emits, so the page paints with or without the attribute. * * WHERE A GIVEN HEX IS NOT USED LITERALLY it is because it fails AA where * app.css puts it, or the palette had no neutral for that role. Ratios in the * comments are computed WCAG relative-luminance, against the token's ground. * * app.css contains ALL the structure and NONE of the colour. Money hues are * shared with the player-side sibling (green up, red down). Row rules are held * near 2:1 on purpose - at 3:1 the 17-column report reads as a grid of lines - * while borders, header underlines and input edges clear 3:1. */ /* ================================================================== SLATE & SKY - the default ================================================================== SLATE & SKY - light Slate #2C3E50 is the chrome and the secondary text. The pale sky #AADEEE is the header band, the hover row and the subtotal row, used exactly as given. The two greys are the row rule (#BBBBBB, literal) and, darkened, the borders. Orange #F39C12, deepened, is the exposure colour on the position board. Links and buttons use a sky-derived #1B5F87: the accent cannot be the chrome colour, or the active nav item vanishes. Money keeps its own green and red, each deepened until it clears the sky band. THE CHROME ACCENT IS A YELLOW, #FFC72C (2026-09-15). It is the one colour that sits on the slate chrome as an accent: the wordmark, the drawer's category headings, the pressed theme toggle, and the figures on the position board's league bands. Yellow cannot be read on white, so on a panel it may only ever be a fill, never text. HEADINGS ARE --bd-title (2026-09-15): the page title, panel and tile headings, toolbar labels, column heads and band names. On the dark direction that IS the yellow; here it is the deepest member of the same family that still reads on white AND on the sky band, #7A5000. One token, two directions, so a heading is the same idea in both. 2026-09-16, THE WEEKLY FIGURES PASS: the sky left the panels. The raised surface is a neutral #E6E6E6, the row rule LiveAction's faint #DDEFEF with a #F2F2F2 zebra carrying the rhythm (--bd-zebra), the Total column carries their blue tint (--bd-tint) and the row under the pointer is that tint made opaque (--bd-hover), money is the hard #008000 / #FF0000 and a zero is black, headings are black, column heads are light grey on the navy, and the face is Arial 13 with 27px rows. The chrome and its yellow are untouched. ================================================================== */ :root, html[data-dir="light-broadsheet"] { --bd-void: #FFFFFF; /* the page */ --bd-surface: #FFFFFF; /* 1.00:1 off the page */ --bd-raised: #E6E6E6; /* 1.25:1 off the panel - subtotals, the book's totals, the folded band's ground; the hover row reads --bd-hover now */ --bd-colhead: #1B324C; /* the column-head band - asked for 2026-09-16, in place of the light blue */ --bd-colhead-ink: #DEDEDE; /* 9.71:1 on the band - light grey; the yellow came off the column heads 2026-09-16 */ --bd-colhead-hi: #FFFFFF; /* 13.1:1 on the band - a sortable head under the pointer */ --bd-sunken: #D6DCE1; /* chip.mute ground, meter track */ --bd-field: #FFFFFF; /* inputs */ --bd-chrome: #2C3E50; --bd-chrome-hi: #3B5168; /* 1.34:1 off the chrome */ --bd-chrome-ink: #FFFFFF; /* 10.98:1 on chrome */ --bd-chrome-dim: #AADEEE; /* 7.53:1 on chrome, 5.62:1 on hover */ --bd-ink: #111417; /* 18.48:1 on panel, 12.67:1 on band */ --bd-muted: #2C3E50; /* 10.98:1 on panel, 7.53:1 on band */ --bd-dim: #4F5C68; /* 6.86:1 on panel, 4.70:1 on band, 4.96:1 on sunken */ --bd-rule: #DDEFEF; /* 1.19:1 on panel - a faint row rule; the zebra carries the row rhythm now */ --bd-edge: #6B7780; /* 4.59:1 on panel, 3.15:1 on band */ --bd-scrim: rgba(44,62,80,.5); /* behind the drawer */ --bd-phosphor: #1B5F87; /* 6.92:1 on panel, 4.74:1 on band */ --bd-phosphor-ink: #FFFFFF; /* 6.92:1 ON the accent */ --bd-up: #008000; /* 5.14:1 on panel, 4.12:1 on band - the hard green, asked for 2026-09-16 */ --bd-up-ink: #FFFFFF; /* 7.15:1 ON the green - the switch's ON word */ --bd-down: #FF0000; /* 4.00:1 on panel, 3.20:1 on band - the hard red, asked for 2026-09-16; under AA for 13px text, kept knowingly */ --bd-pos: #A86000; /* 4.84:1 on the field */ --bd-pos-hi: #7A4800; /* 7.62:1 on the field */ --bd-flat: #000000; /* 21.00:1 on panel - a zero is black */ --bd-gold: #8A5A00; /* 4.96:1 on the soft accent chip */ --bd-accent-chrome: #FFC72C; /* 7.04:1 on chrome */ --bd-title: #000000; /* 21.00:1 on panel - page title, panel and tile headings, 16.83:1 on band; column heads take --bd-colhead-ink */ --bd-up-chrome: #22D96E; /* 5.87:1 on chrome */ --bd-down-chrome: #FF8A82; /* 4.82:1 on chrome */ --bd-split-b: #AADEEE; /* 4.74:1 against split-a */ --bd-font: Arial, Helvetica, sans-serif; /* Arial 13 everywhere, 2026-09-16 */ --bd-mono: Arial, Helvetica, sans-serif; /* figures in the same face; tabular-nums does the lining up */ --bd-display: "Segoe UI", Tahoma, Verdana, Arial, sans-serif; --bd-row-h: 27px; --bd-radius: 3px; --bd-radius-lg: 4px; --bd-pad: 14px; --bd-gap: 14px; --bd-rule-w: 1px; --bd-shadow: none; --bd-panel-border: var(--bd-rule-w) solid var(--bd-edge); /* the EDGE, not the rule - a panel must read as an object */ --bd-head-size: 13px; --bd-head-track: .10em; --bd-head-weight: 700; --bd-head-case: uppercase; --bd-fig-size: 13px; --bd-display-size: 36px; --bd-display-track: -.012em; --bd-cat-0: #1B5F87; /* categorical ramp; cat-0 IS the accent */ --bd-cat-1: #6B4E86; --bd-cat-2: #96631A; --bd-cat-3: #2C6E6E; --bd-cat-4: #8A5566; --bd-cat-5: #4A5A7A; --bd-cat-6: #6E7A38; --bd-cat-7: #5E574F; --bd-cat-8: #1F6A8C; --bd-cat-9: #7A4A16; --bd-cat-10: #8A3E6B; --bd-cat-11: #3D5E52; --bd-focus: #1B5F87; /* 6.92:1 on panel */ --bd-split-a: #1B5F87; /* the position bar's first side - the accent */ --bd-phosphor-soft: rgba(27,95,135,0.12); /* chip ground, selected states */ --bd-prev: rgba(17,20,23,0.32); /* last week's bar behind this week's - page ink at low alpha, NOT --bd-flat */ --bd-cell: rgba(17,20,23,0.05); /* week-chart day cell at rest */ --bd-cell-hov: rgba(17,20,23,0.11); /* week-chart day cell under the pointer */ --bd-cell-sel: rgba(27,95,135,0.18); /* week-chart day cell selected */ --bd-zebra: #F2F2F2; /* 1.12:1 off the panel - every second account row */ --bd-tint: rgba(107,212,255,0.17); /* the Total column, over white or over the zebra */ --bd-hover: #E6F8FF; /* 1.09:1 off the panel - the row under the pointer: the tint made opaque, so the frozen column paints */ } /* The browser chrome and form controls should match the ground, or a native