/* Llwybr design tokens — the single source of truth for colour, type and spacing. Every surface (landing, dashboard, player, teacher, admin, auth, certificate) links this file; nothing redeclares a token locally. The palette is sampled from the shipped tile art rather than invented, so the chrome and the board live in the same world: ink #3F2631 the linework colour baked into every sprite path #ECD6A0 sand.png grass #84C669 the grass tile (its shade is #65A556) bloom #FDBE53 the flower gold steel #7D9598 the Little Bot floor Contrast: every pairing used for text or state meets WCAG AA (4.5:1). Measured — white on draig 5.88, white on grass-deep 6.42, muted on paper 6.20, danger on paper 9.07, ink on path 9.58. --grass and --steel-art are ART colours: decoration only, never a background for text. */ /* ---------- faces ---------- Fredoka is display only. The shipped copy was the latin subset, which has no ŵ Ŵ ŷ Ŷ — the two letters Welsh cannot do without — so Welsh headings fell back to a system face mid-word. Both subsets are now served. */ @font-face{ font-family:"Fredoka"; src:url("/includes/fonts/ui/fredoka-300-700-latin.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Fredoka"; src:url("/includes/fonts/ui/fredoka-300-700-latin-ext.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Atkinson Hyperlegible Next (Braille Institute) carries body copy, tables and forms: its letterforms are drawn to be told apart, which matters when a pupil is reading l / 1 / I in an instruction about code. */ @font-face{ font-family:"Atkinson Hyperlegible Next"; src:url("/includes/fonts/ui/atkinson-var-latin.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Atkinson Hyperlegible Next"; src:url("/includes/fonts/ui/atkinson-var-latin-ext.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* One mono for every piece of code in the product: the CodeMirror editor, the generated Python, the Output panel, login cards and the certificate. */ @font-face{ font-family:"IBM Plex Mono"; src:url("/includes/fonts/ui/plexmono-400-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"IBM Plex Mono"; src:url("/includes/fonts/ui/plexmono-400-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"IBM Plex Mono"; src:url("/includes/fonts/ui/plexmono-600-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"IBM Plex Mono"; src:url("/includes/fonts/ui/plexmono-600-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* ---------- colour ---------- */ --ink:#3F2631; /* chrome, headings, body text */ --ink-soft:#5A3E49; /* hover state on dark chrome */ --muted:#6B5560; /* secondary text; AA on paper and on white */ --paper:#FAF4E8; /* page background */ --panel:#FFFFFF; /* card background */ --rule:#E6DACB; /* hairlines, input borders */ --path:#ECD6A0; /* sand */ --path-edge:#D6B87E; --grass:#84C669; /* ART: fills and decoration, never behind text */ --grass-deep:#2F6B3A; /* the same idea at AA: "done", positive text */ --bloom:#FDBE53; /* stars, over-par ring */ --bloom-deep:#8A5A00; /* over-par text on paper */ --draig:#C8102E; /* Welsh red: identity and primary action only */ --draig-deep:#960C22; /* pressed / button shadow */ --steel:#4C6E72; /* Little Bot accent at AA */ --steel-art:#7D9598; /* ART: the robot floor colour */ --danger:#7B2230; /* destructive: outline and text, filled on hover */ /* ---------- type ---------- */ --font-display:"Fredoka","Segoe UI",system-ui,sans-serif; --font-body:"Atkinson Hyperlegible Next","Segoe UI",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --step--1:0.8125rem; /* 13px — captions, table meta */ --step-0:1rem; /* 16px — body */ --step-1:1.125rem; /* 18px — lede, card body */ --step-2:1.375rem; /* 22px — section heading */ --step-3:1.75rem; /* 28px — page heading */ --step-4:2.5rem; /* 40px — display */ --step-5:clamp(2.75rem,6vw,4rem); /* ---------- form ---------- */ --radius:14px; --radius-sm:9px; --shadow:0 3px 14px #3f263118; --shadow-lift:0 10px 30px #3f263126; --focus:3px solid var(--draig); }