/* ============================================================ The one token file. Every page of the hub — the hub itself, sign-in, invite, change-password, admin, and the Players Hub — reads its colours, type, radii, shadows and motion from here. A hex value or radius that is not in this file does not ship. (README_DESIGN_REVIEW.md §4; DESIGN_STANDARD.md Phase 1.) Súil layer, 7 Sep 2026 — the palette, type and motion of design/SUIL_BRIEF_v1.md, laid over the same token names so every existing screen inherits the look without being rebuilt. ============================================================ */ :root{ color-scheme: light; /* PAPER & SURFACES — re-cut 9 Sep 2026. Was: pure white cards on cream. That is a 1.06 step, which sounds like nothing and reads like everything, because every card ALSO carried a visible border — and a border is what turns a group into an OBJECT. The home screen held fourteen objects; the session screen held eight. An interface you have to parse object by object feels like a web app no matter how well it is spaced. Now: paper resting on deeper paper. The ground is warmer and one step down, the surface is paper rather than white, and the SEPARATION MOVED OUT OF THE BORDER AND INTO THE SPACE. Computed on the new surface: ink 15.4:1, secondary 7.0:1, tertiary 5.2:1, accent 7.8:1, red 5.7:1, amber 4.7:1 — every one still passes, several by more than before. */ --bg:#F3F1EA; --surface:#FBFAF7; --surface-2:#EDEBE3; --surface-3:#E3E0D6; /* THE TILES, 21 Sep 2026 — the material of the new shell (static/tiles.css): a tile is near-white on ivory with a hairline and a lit top edge, and the things inside it cast real shadows. */ --tile:#FBFAF7; --tile-2:#FFFFFF; --hair:rgba(35,33,29,.08); --hair-2:rgba(35,33,29,.16); --tile-lit:rgba(255,255,255,.75); --shadow-rgb:35,33,29; --r-tile:28px; --wrap:1200px; --pad:20px; --glass-rgb:251 250 247; --rim-hi:rgba(255,255,255,.95); /* INK — four LABEL LEVELS, not one colour and three opacities. Apple's system defines label / secondaryLabel / tertiaryLabel / quaternaryLabel as COLOURS, each with a guaranteed contrast, and never fades text with opacity — because opacity composites against whatever happens to be behind it, so the same "dimmed" text passes on one surface and fails on the next. Súil had no fourth level, so de-emphasis was done with `--line-2` (a HAIRLINE colour) used as a text colour: the dimmed days on the month grid measured 1.32:1. Unreadable, and it will happen again to anyone who needs a quieter grey and finds none. Computed on --surface #FBFAF6 / the weekend cell / --bg: ink 15.4 / 14.9 / 14.4 secondary 7.5 / 7.0 / 6.9 tertiary 6.0 / 5.7 / 5.6 quaternary 4.6 / 4.4 / 4.3 Quaternary is the floor and is for text you may skip, never for text you must read. Below it there is no level — there is invisible. */ --ink:#23211D; --ink-2:#55514A; --ink-3:#63605A; --ink-4:#767166; /* HAIRLINES, now whispers. A line should tell you two things belong to different groups; it should not draw a box around each of them. These are alpha rather than opaque so they sit correctly on any surface. */ --line:rgba(35,33,29,.07); --line-2:rgba(35,33,29,.14); /* Roosevelt Lakers green — #008852, PMS 348C, from the 2024 Lakers Brand Guidelines. The accent is the primary action and the current state; nothing else. --accent-deep carries any team-coloured TEXT (8.2:1); --accent itself is a ring, a pupil or a large fill, never type. */ --accent:#008852; --accent-deep:#005C32; --accent-soft:#E6F2EB; /* the soft edge — 1.4:1 on paper, a boundary and never a signal. It was #C9E2D3 written out ten times across three files with no dark value at all, so on a dark card it painted a pale mint hairline. */ --accent-line:#C9E2D3; --turf:#3F8F60; /* the grass on the stage: a pitch, not a button */ --accent-light:#73C167; --accent-rgb:0,136,82; --pitch:#008852; --pitch-deep:#005C32; --pitch-soft:#E6F2EB; /* opposition is never a colour — colour means ours */ --them:#5A564E; --on-accent:#FFFFFF; /* Ink on a SOLID coloured chip — a status pill, a badge. Distinct from --on-accent, which inverts on dark because the accent fill inverts with it; a status chip is painted in --pitch / --amber / --red / --ink-3 and stays dark in both themes, so its ink stays light in both. It existed as a bare "#fff" in the markup, which is the one thing this file forbids. */ --on-solid:#FFFFFF; /* semantic colour — state, never decoration */ --red:#B23B27; --red-soft:#F8ECE9; --amber:#96690F; --amber-soft:#F6EEDC; --blue:#3A66A0; --blue-soft:#E9EFF7; /* the keeper's ring: #C9A227 fails at 2.3:1, so it is decoration only */ --gold:#A67F12; --gold-accent:#C9A227; /* ink on the gold chip — the same dark in both themes (7.6:1 on #C9A227) */ --on-gold:#23211D; /* chalk on the lineup board — brief §2.3. The pitch is drawn in JS, and this is the token it reads, so the board is no longer the one exception to the rule that every colour in the app lives in this file. */ --pitch-line:#B9B2A3; /* The keyline around a piece on the grass. It was written as a bare "#fff" ten times inside the board's own path markup — the one thing this file forbids — so on a dark pitch every token still wore a pure-white rim that no palette could reach. It is light in both themes ON PURPOSE: it is a physical edge, like the white border printed round a sticker, and its job is to separate a token from grass of any shade. */ --token-edge:#FFFFFF; /* the cap of a training pole */ --pole-top:#B85C3F; --guide:#D9552C; /* smart guides on the boards: warm, never the accent, so a guide cannot read as a selection */ /* geometry — paper is rectangular, like a team sheet; glass is capsule */ --r-lg:24px; --r-md:14px; --r-sm:9px; --r-xs:6px; --r-glass:24px; --r-capsule:999px; /* elevation — two shadows, one focus ring. Never border + wide shadow. */ --sh-1:0 1px 2px rgba(35,33,29,0.04); --sh-2:0 1px 3px rgba(35,33,29,0.06), 0 18px 44px -18px rgba(35,33,29,0.16); --sh-glass:0 1px 0 rgba(255,255,255,.55) inset, 0 12px 32px -14px rgba(35,33,29,.28); --ring:0 0 0 3px rgba(var(--accent-rgb),.18); /* glass — the chrome layer only: top bar, sheets, toasts, flyouts. Never cards, lists, the pitch or anything you read. True blur is spent only where content actually passes underneath; everywhere else the material is carried by its EDGE, which costs nothing. */ --glass-a:.72; --glass-blur:16px; --glass-sat:150%; --glass-line:rgba(35,33,29,.10); /* the rim: lit on the top-left, shaded on the bottom-right, so a panel reads as a raised slab of glass rather than a flat rectangle */ --rim:linear-gradient(155deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.38) 30%,rgba(35,33,29,.05) 62%,rgba(35,33,29,.11) 100%); --sh-lift:0 10px 30px -16px rgba(35,33,29,.34); --sh-lift-2:0 18px 46px -20px rgba(35,33,29,.40); /* type — the hub's own, which is the default and the fallback. --display is Big Shoulders; on the default look it is spent on exactly two things, the gameday score and the match clock. */ --serif:Georgia,'Times New Roman',serif; --display:"Big Shoulders","Big Shoulders Display","Arial Narrow",Impact,sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --w-emph:650; --fs-xs:10.5px; --fs-sm:12px; --fs-base:13.5px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px; /* motion — three durations, one curve, one spring for what you touch */ --t-fast:150ms; --t-base:250ms; --t-slow:350ms; --ease:cubic-bezier(0.2,0,0,1); --out:cubic-bezier(0.32,0.72,0,1); --spring:linear(0,.0088,.0345,.0757 8.4%,.2113,.3671 20.3%,.5453,.7264,.8815,1.0037,1.0879 40.6%,1.1319,1.1424,1.1272 55.2%,1.0876,1.0521 65.1%,1.0184,1.0043 79.7%,.9993,1.0002); /* spacing — the 4px scale */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; } /* ------------------------------------------------------------------ SÚIL. Settled 7 Sep 2026 — Eóin: "this is the ONE". The Léargas structure wearing Súil's name: a tinted rail, condensed uppercase nav, the floating shell, the wordmark whose fada is an eye. The switch that used to let this be flipped off is gone; an app with a look toggle is an app whose designer refused to choose. ------------------------------------------------------------------ */ :root{ --body:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --w-emph:620; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15.5px; --fs-lg:19px; --fs-xl:26px; /* The rail, light. A pale green that belongs to the palette without being a wash — it is the one surface allowed a tint, because it is the one surface that is never content. Contrast against --rail, computed: label 12.8:1, secondary 5.3:1, accent 7.0:1. */ /* NEUTRAL CHROME, 9 Sep 2026. This was a mint wash — a large surface tinted with the team's colour, carrying green text, sitting under a green squad pill and a green search bar. Three green objects in the first 200px of the window. Apple never tints chrome with a brand colour: their sidebars are neutral system materials, and colour appears on exactly one thing — what is SELECTED. Colour that is everywhere cannot mean anything, and a brand colour spread across furniture is the difference between a product and a merchandise stand. The rail is warm neutral now, one step off the paper it sits beside, and the green has one job again. Contrast on --rail: label 14.6:1, secondary 5.4:1, accent 7.6:1. */ --rail:#F1EFEA; --rail-2:#E6E3DC; --rail-line:rgba(35,33,29,.10); --on-rail:#23211D; --on-rail-2:#5A564E; --rail-accent:#005C32; /* The current item is a light pill with dark type on BOTH themes — it is the brightest thing in the rail either way, which is what makes it read as "you are here" without needing a colour. */ --rail-on:#FFFFFF; --rail-on-ink:#15201A; } /* ------------------------------------------------------------------ DARK. The hub has been light-only since it was written. It can go dark because of a rule its author kept: every colour in eleven thousand lines is a var() from this file, so the palette is the only thing that has to change. True neutral, not a green charcoal — chrome is neutral even when it is dark, and the team's colour stays the team's. Contrast computed against --bg #141618: ink 15.2:1, secondary 8.7:1, tertiary 5.6:1, accent 6.7:1, red 5.7:1, amber 9.1:1; and on --surface #1D2024: ink 13.7:1, secondary 7.8:1, accent 6.0:1. Ink on the accent fill is 6.7:1, which is why --on-accent inverts here. Dark is for evening planning, never the outdoor default. The touchline switch is Sun mode, which is a different thing and wins. ------------------------------------------------------------------ */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#131517; --surface:#1C1F23; --surface-2:#24282D; --surface-3:#2E333A; --tile:#1C1F23; --tile-2:#23272C; --hair:rgba(238,235,228,.10); --hair-2:rgba(238,235,228,.2); --tile-lit:rgba(255,255,255,.04); --shadow-rgb:0,0,0; --glass-rgb:20 22 24; --rim-hi:rgba(255,255,255,.28); --ink:#EEEBE4; --ink-2:#B8B3A8; --ink-3:#9C978B; --ink-4:#847F74; --line:rgba(238,235,228,.10); --line-2:rgba(238,235,228,.18); /* Roosevelt green lifted until it carries on a dark ground. --accent-deep is the text tone on light; on dark the same value serves both, and --on-accent flips to the page colour so a filled control reads. */ --accent:#2FB27A; --accent-deep:#2FB27A; --accent-soft:rgba(47,178,122,.16); --turf:#245C3D; --accent-line:rgba(47,178,122,.35); --accent-light:#7AD7AE; --accent-rgb:47,178,122; --on-accent:#141618; --pitch:#2FB27A; --pitch-deep:#2FB27A; --pitch-soft:rgba(47,178,122,.16); --them:#B8B3A8; --red:#E0705C; --red-soft:rgba(224,112,92,.16); --amber:#E0B14A; --amber-soft:rgba(224,177,74,.16); --blue:#7FA8E0; --blue-soft:rgba(127,168,224,.16); --gold:#C9A227; --gold-accent:#C9A227; /* chalk on a dark board: a line, not text, so it is drawn to be seen rather than read — 2.4:1 against --surface */ --pitch-line:#474D55; --token-edge:#F2F0EA; /* still light: it separates a piece from the grass */ --pole-top:#C9694A; --guide:#F0825A; --sh-1:0 1px 2px rgba(0,0,0,.28); --sh-2:0 1px 3px rgba(0,0,0,.34), 0 18px 44px -18px rgba(0,0,0,.60); --sh-lift:0 10px 30px -16px rgba(0,0,0,.70); --sh-lift-2:0 18px 46px -20px rgba(0,0,0,.78); --rim:linear-gradient(155deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 32%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.30) 100%); --glass-line:rgba(238,235,228,.12); /* The rail goes to the near-black the Léargas direction drew. Contrast on it: label 16.8:1, secondary 8.7:1, accent 7.9:1. */ /* Neutral on dark too — a near-black that is a shade of the page, not a shade of the team. The selected item is a raised neutral fill rather than a bright white slab: on dark, "you are here" is a step UP in the material, not a hole punched in it. */ --rail:#131518; --rail-2:#1E2226; --rail-line:rgba(238,235,228,.12); --on-rail:#EEEBE4; --on-rail-2:#B8B3A8; --rail-accent:#3FBE86; --rail-on:#31363C; --rail-on-ink:#F4F2EC; } /* Type that works outdoors. Sun mode is the touchline and the grass, where the screen is glanced at from arm's length in daylight: the whole scale steps up, not one label. Apple's body is 17pt for the same reason. */ /* Under a finger the base steps up to 15; in the sun to 17. The scale moves together, so a label never becomes body and body never becomes a heading. */ @media(max-width:600px){ :root{ --pad:16px; } } @media(pointer:coarse){ :root{ --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16.5px; --fs-lg:20px; --fs-xl:27px; } } :root[data-sun="on"]{ --fs-xs:13px; --fs-sm:14.5px; --fs-base:17px; --fs-md:18.5px; --fs-lg:22px; --fs-xl:30px; }