/* ========================================================================== Mutūn — Zawiya Library design system · canonical brand tokens -------------------------------------------------------------------------- Single source of truth for the Mutūn palette, type, and shape, shared by the marketing website and the Foundation-program apps. Derived from the brand seal ("Zawiya Library — forest green & beige"). See ADR 0021. HOW TO USE (link this FIRST) …then reference the tokens: color: var(--color-ink); etc. This file is TOKENS ONLY — CSS custom properties and @font-face. It declares no element/class selectors, so linking it never restyles a consumer on its own; a page opts in by using the variables. That is what makes it safe to adopt incrementally, one app at a time (ADR 0021). Paths in this file (the @font-face urls) resolve relative to THIS stylesheet, so they work from any consumer directory depth. ========================================================================== */ /* ========================================================================== WEBFONTS ARE SELF-HOSTED (MUT-79) -------------------------------------------------------------------------- This file used to `@import` Google Fonts from here. An @import *inside* a stylesheet is the slowest possible way to load a face: the browser fetches mutun-theme.css, parses it, discovers the import, does DNS + TLS to fonts.googleapis.com, fetches THAT css, discovers the font urls, then does DNS + TLS to a SECOND origin, fonts.gstatic.com, before one byte of Amiri arrives. Four serialized round-trips to two third-party origins on every drill entry, then a swap flash from the fallback naskh. That flash is what read as "not snappy" (ADR 0023), and the dependency also made ADR 0013's "works offline" promise plainly false. Both families are OFL 1.1 (licences beside the files in fonts/), so the woff2s live next to Bouazzi and every request is same-origin and cacheable. The files are Google's own per-script subsets, kept with Google's unicode-range declarations so a page downloads only the scripts it paints. ONLY THE WEIGHTS THE APPS USE. A grep across the seven wired drills finds font-weight 400 / 600 / 700 and exactly one italic — the English gloss (.why / .note / .diag-why), which is body type. No 500, no 800, and no italic Arabic anywhere. So: Cormorant roman + italic, and Amiri 400 + 700 with no italic. Cormorant is now shipped as a VARIABLE font with a 300–700 wght axis, so one file per subset covers 400, 600 and 700 in one download — which is why there is no CormorantGaramond-600 here and none is missing. latin-ext IS NOT OPTIONAL. Every drill sets transliteration — Mutūn, ḥarf, ṣifah, muḍāf — and ū is U+016B while ḥ / ṣ / ḍ / ṭ live in U+1E00–1E9F. Both fall in Google's latin-ext subset, not latin. Drop it and half the UI's diacritics silently swap to Georgia mid-word. font-display stays `swap`, matching Bouazzi. `optional` would guarantee no flash at all, but it also permits a cold load to render the WHOLE session in whatever naskh the OS happens to have — and Amiri's harakat placement is pedagogy here, not decoration (see --vocalized-line-height in qasas-core.css). Same-origin + preload shrinks the swap window to the point where the trade is not worth taking. THE CONTRACT. A font discovered inside a stylesheet still costs one round trip after that stylesheet parses, so every page preloads the three faces it paints with first: `crossorigin` is required even same-origin: fonts are always fetched in CORS mode, and without it the preload is discarded and the file fetched twice. THE FOURTH FACE IS NOT UNIVERSAL (MUT-97). Amiri-Bold was missing from every page's preload list, so wherever a page did paint bold Arabic it arrived a round trip late — on the largest glyphs on the screen. But the fix is not a fourth line in all nine s. Amiri-Bold-arabic.woff2 is 100K, and a preload for a face the page never paints is a wasted fetch AND a console warning, which is worse than the late swap it was meant to cure. An audit of which pages paint Amiri at weight >= 600 above the fold: tashkil_tap h1.title-ar.ar at 700/44px, .sentence.ar at 700/38px conjugation_sprint .level-name at 600 in the Arabic face — the stage menu IS the first screen lesson h1.title-ar.ar at 700/44px Those three carry the fourth preload. The rest do not, and each for a reason worth keeping: index h1.title-ar is 700, but its text is ENGLISH ("The Path") and it carries no .ar, so it is set in Cormorant and never touches Amiri at all irab_builder .word .w-role.ar is 600 but 12px, colour:transparent until a role is assigned, and painted mid-round rather than at first paint — not worth 100K up front sentence_forge .slot and .tile are Arabic at 400; every 600/700 rule on word_well these four is on Latin UI (buttons, .level-name, three_way_sort .prompt-en), which is Cormorant one_word_wrong Re-run that audit before adding bold Arabic to any page: the rule is "paints Amiri at >= 600 above the fold", not "is a drill". Related and NOT fixed here: tashkil_tap is the only drill whose h1.title-ar is 700 — the other six are 400. That is drift, and it belongs to the reconciliation pass (MUT-85). AND WHEN THE SHELL EXISTS (MUT-82/83) the Lesson page warms the pages a learner is one tap away from, which is what makes sibling pages feel like an SPA on navigation (ADR 0023): The third joined them at MUT-97. It is the repo's largest asset (57K, bigger than any drill page), every drill a Lesson can list loads it, and nothing warmed it. It is a prefetch from the Lesson page only — extending this contract past the two assets it originally named, deliberately and here rather than as a quiet tag in one page. Deliberately NOT added to the drills: a drill has no next page to warm, and nothing in the repo links out of one yet. ========================================================================== */ /* Amiri — the naskh face for all running Arabic. OFL 1.1, the Amiri Project Authors; see fonts/OFL-Amiri.txt. */ @font-face { font-family: "Amiri"; src: url("fonts/Amiri-Regular-arabic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Amiri's Latin, for the digits, spaces and punctuation that land INSIDE an .ar element. Without it those characters fall through to the next family and an Arabic line's word spacing comes from a font that is not setting it. */ @font-face { font-family: "Amiri"; src: url("fonts/Amiri-Regular-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; } /* Bold Arabic only. Nothing sets Latin body text in Amiri, so there is no Amiri-Bold-latin: at 700 a stray Latin space resolves to the 400 face above, which is the right answer for a glyph with no ink. */ @font-face { font-family: "Amiri"; src: url("fonts/Amiri-Bold-arabic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Cormorant Garamond — display and body. OFL 1.1, the Cormorant Project Authors; see fonts/OFL-CormorantGaramond.txt. Variable on wght; the range is declared 400–700 rather than the file's full 300–700 because nothing here sets a lighter weight and a declared range documents intent. */ @font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Variable-latin.woff2") format("woff2"); font-weight: 400 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: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Variable-latin-ext.woff2") format("woff2"); font-weight: 400 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; } /* The italic is a real cut, not a synthetic slant — it carries every drill's English gloss line. */ @font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic-Variable-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; 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: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic-Variable-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; 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; } /* The Maghribi calligraphy face for the متون wordmark — bundled locally (MIT, Dr. Ahmed Bouazzi's revival). Logo use only: it is not in --font-arabic, so nothing sets running Arabic in it. url() is relative to this CSS file, not the document. */ @font-face { font-family: "Bouazzi Maghribi"; src: url("fonts/BouazziMaghribi-Regular.woff2") format("woff2"), url("fonts/BouazziMaghribi-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* --- raw brand palette (the "what") ----------------------------------- Named after the ink, not the role. Prefer the semantic roles below in product code; reach for a raw value only when no role fits. */ --mtn-green: #1d4030; /* forest green — the seal disc, primary ink */ --mtn-green-deep: #173324; /* deeper green — hover-dark, footer */ --mtn-cream: #f7f2e8; /* page ground — lightened for text contrast */ --mtn-cream-raised: #fdfbf6; /* cards, nav, panels */ --mtn-cream-inner: #f0e9db; /* insets, tinted bands (the seal keeps its own #f3ebda) */ --mtn-gilt: #b39169; /* gilt accent — rules, borders, fills; never text */ --mtn-gilt-light: #d8bd93; /* seal ring stroke, hairlines on dark */ --mtn-gilt-pale: #ecdfc6; /* ring text / faint gilt on green */ --mtn-green-ink: #12291d; /* green for TEXT — darker than the fill green */ --mtn-gilt-ink: #6b4c22; /* gilt for TEXT — darker tan, 6:1 on cream */ --mtn-ink-muted: #342d22; /* secondary body ink — dark umber, 10:1 on cream */ --mtn-hairline: #d8c9a6; /* hairline borders on light */ --mtn-link: #6b4c22; /* body links, dark ochre */ --mtn-link-hover: #8a6532; /* link hover */ --mtn-placeholder: #7a6d56; /* empty-field / empty-slot ink */ /* --- semantic roles (the "how it's used") ----------------------------- Product code should target THESE. A future dark/nocturne app variant can override just this block, leaving the raw palette intact (ADR 0021). */ /* TEXT roles take the darker ink of their hue family (the claude.ai "Mutūn Design System", 2026-09-27): the fill green stays the fill, and text moves to --mtn-green-ink. This is the split the website's --green alias was already written for — --color-ink and --color-accent-strong were one tone until now, and they are two. */ --color-ink: var(--mtn-green-ink); /* primary text on light */ --color-ink-muted: var(--mtn-ink-muted); /* secondary text */ --color-surface: var(--mtn-cream); /* page background */ --color-surface-raised: var(--mtn-cream-raised); /* cards / nav / panels */ --color-surface-inset: var(--mtn-cream-inner); /* insets / tinted bands */ --color-accent: var(--mtn-gilt); /* gilt — rules, borders, fills; never text */ --color-accent-text: var(--mtn-gilt-ink); /* gilt-family TEXT: eyebrows, kickers, labels */ --color-accent-soft: rgba(179, 145, 105, .14);/* gilt wash (hover fills) */ --color-accent-strong: var(--mtn-green); /* green — solid buttons */ --color-line: var(--mtn-hairline); /* hairline borders */ --color-on-dark: var(--mtn-cream-raised); /* text on a green ground */ --color-muted-on-dark: var(--mtn-gilt-pale); /* faint text on green */ --color-accent-on-dark: var(--mtn-gilt-light); /* gilt on a green ground */ --color-link: var(--mtn-link); --color-link-hover: var(--mtn-link-hover); /* Text that stands for something not yet supplied — an ::placeholder, an empty Sentence Forge slot, a stage the learner has not reached. Lighter than --color-ink-muted on purpose: it must read as absent, not as quiet. */ --color-placeholder: var(--mtn-placeholder); /* --- type ------------------------------------------------------------- Serif-throughout brand (no sans/mono mixing). Arabic reads in naskh — Amiri first, then the platform naskh faces. The Maghribi face is a logo-only face (the متون calligram in seal.svg); it is deliberately NOT in this chain, because drill text must stay in the naskh the learner reads elsewhere. */ /* Amiri sits second: Cormorant has no Arabic glyphs, so an Arabic run inside Latin text falls through to naskh per-glyph, never to a system sans. */ --font-display: "Cormorant Garamond", "Cormorant", "Amiri", Georgia, "Times New Roman", serif; --font-body: "Cormorant Garamond", "Cormorant", "Amiri", Georgia, "Times New Roman", serif; --font-arabic: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", serif; --tracking-eyebrow: .28em; /* uppercase gilt eyebrows ("Classical Texts Circle") */ --tracking-kicker: .2em; /* the card kicker — the eyebrow idiom one step in, for a label sitting INSIDE a card rather than over a section. .28em wraps at card width. */ --tracking-wordmark: .3em; /* the MUTŪN wordmark */ --tracking-nav: .14em; /* TYPE SCALE — nine levels and nothing in between, from the claude.ai "Mutūn Design System" (tokens/typography.css). Cormorant has a small x-height, so the scale runs large. 15px is the floor: nothing is set smaller. Pixel lengths, not rem, because the design specifies them so. NAME HAZARD: qasas-core.css's --text-dim and --text-faint are COLOURS. These are lengths. Do not read the --text-* prefix as "a text colour". --text-eyebrow is NOT on the scale yet, deliberately. It was read off the v10 website (MUT-79) with the note "if the design differs, the design wins and this moves" — and the design does differ: its eyebrow is the 16px label step. The website has moved (its .eyebrow reads --text-label). The drills have not, because at 16px the app's eyebrows wrap to two lines in a 390px column ("Classical Texts Circle" on the shell, the Iʿrāb Builder and Conjugation Sprint headers) — a drill typography change that wants its own decision and browser pass, not a ride on a website redesign. When it moves, it moves here, to var(--text-label). */ --text-caption: 15px; /* badge, footer note — the floor */ --text-label: 16px; /* uppercase tracked labels: eyebrow, kicker, nav, arrow link */ --text-small: 18px; /* secondary copy: card text, descriptions */ --text-body: 21px; /* running body copy, line-height 1.7 */ --text-lede: 24px; /* italic ledes, footer lockup */ --text-title-sm: 28px; /* card titles, nav wordmark, hero tagline */ --text-quote: 30px; /* pull quote */ --text-title-md: 38px; /* section titles */ --text-display: 46px; /* hero wordmark (tracked .3em, so it reads larger) */ --text-title-lg: 52px; /* page titles */ --text-button: 17px; /* the one off-scale size: uppercase button labels */ --text-eyebrow: .72rem; /* the app eyebrow, 11.52px — see above */ /* --- shape & elevation ------------------------------------------------ */ --radius: 3px; --radius-pill: 999px; --hairline: 1px; --shadow-card: 0 18px 40px -30px rgba(29, 64, 48, .55); --shadow-pop: 0 14px 34px -20px rgba(29, 64, 48, .5); /* NO --focus-ring here, and that is a decision (MUT-113), not an omission. It was declared as `0 0 0 3px rgba(179, 145, 105, .15)` and adopted by nothing in two months. The reason it found no home is that it is a box-shadow, so it was never the token the program's `:focus-visible` outlines could adopt — an outline colour and a shadow wash are different properties. (MUT-113's ticket put those outlines at 63; the real figure across the nine themed pages and core is 30 rules setting `outline` under 44 `:focus-visible` selectors. The mechanism argument is unaffected, but the number was inherited from the ticket rather than counted.) The one element it fit is index.html's welcome name field, the only in the program, and that field already carries `outline: 2px solid var(--color-ink)`. Swapping a solid 2px indicator for a 15%-opacity halo would have been an accessibility regression dressed as tokenisation. A future field wanting a rest/hover wash should declare it here with the element it serves named alongside. */ }