/* ============================================================================ BRAND THEME — beralmramyh (جمعية البر الأهلية بالمرامية) THIS FILE IS THE ENTIRE REBRAND SURFACE. The owner runs several associations on this codebase. A clone gets a new folder under wwwroot/brands// containing this file, brand.json and the logo — and nothing else changes. site.css consumes these tokens and declares no colour, no font name, no radius and no shadow of its own; if a component needs a value that is not here yet, the value becomes a token rather than a literal. So the tokens below are deliberately wider than a palette. They cover the things that make two association sites look like different DESIGNS rather than the same design in a different colour: border weight, corner radius, whether a card is drawn with a hairline or a shadow, how tight the headings are, how much air a section band gets, and how a button is shaped. ── CONTRAST BUDGET (WCAG AA — every figure below was COMPUTED, none estimated. Recompute the whole table if any value changes.) ──────────────────────── --green-900 #2C4A18 on white ......... 10.00:1 ✓ headings, strong body white ON --green-800 #385F16 ......... 7.46:1 ✓ the deep band ground --on-deep-muted ON --green-800 ....... 5.63:1 ✓ --on-deep-faint ON --green-800 ....... 4.75:1 ✓ (this is why the tint was raised to .72) --green-200 #D5E5C8 vs white ......... 1.32:1 tile separation — matches --sand exactly --brand-strong ON --green-200 ........ 7.56:1 ✓ the glyph inside an icon tile --green #497C1D on white ......... 5.02:1 ✓ links, primary button fill --green #497C1D on --sand-50 ..... 4.52:1 ✓ eyebrows and prose links on a sand band white ON --green ............... 5.02:1 ✓ button label on the primary fill --green-700 #3A6317 on white ......... 7.05:1 ✓ hover / pressed / --info --green-700 #3A6317 on --sand-50 ..... 6.35:1 ✓ --ink #22271D on white ......... 15.26:1 ✓ body --ink-muted #5B6353 on white ......... 6.26:1 ✓ / --sand-50 5.64 / --sand 4.74 ✓ --gold-ink #7A6410 on white ......... 5.74:1 ✓ THE WARM TEXT COLOUR — see below --gold-ink #7A6410 on --gold-wash ... 5.16:1 ✓ / on --sand-50 5.17 ✓ --ok #2F6B3A on --ok-wash ..... 5.57:1 ✓ --warn #7A4B10 on --warn-wash ... 6.46:1 ✓ --danger #B3261E on --danger-wash . 5.72:1 ✓ --green-300 #6B973B on white ......... 3.43:1 ✗ DECORATIVE ONLY — NEVER TEXT --gold #C2A21E on white ......... 2.48:1 ✗ DECORATIVE ONLY — NEVER TEXT --gold #C2A21E on --surface-deep . 3.01:1 ✗ gold is barred on the GREEN grounds too --green-300 #6B973B on --surface-deep . 2.17:1 ✗ likewise --ink-faint #8A9182 on white ......... 3.25:1 ✗ disabled / separator only, never body THE WARM-ACCENT PROBLEM, AND ITS ANSWER. --gold is 2.48:1 on white and 4.04:1 on the green, so it fails on every ground this site has: for a long time the design had no warm colour it could put a WORD in, and gold was permanently decorative. --gold-ink (#7A6410) is that colour — 5.74:1 on white, 5.16:1 on the gold wash, 5.17:1 on sand. Use it for warm labels and warm text; use --gold only for rules, dots, emblems and fills. The bar on --green-300 and --gold is a property of their VALUE, not their name: whatever a clone puts in them, site.css will only ever use them as fills and rules. A clone MUST redo this arithmetic for its own palette. ============================================================================ */ :root { /* ── Identity palette ───────────────────────────────────────────────────── */ /* Derived from the legacy site's own CSS (.green #6b973b, .bg-brown #e7e0c9, gold #c2a21e) and from logo2.png, then darkened wherever a colour has to carry text. */ /* A RAMP, not five spot colours. The old palette was five brand tokens and almost nothing else, which is why so much of the site collapsed onto two greens. Hue is held at ~92° across the whole green ramp so the family still reads as one colour. */ --green-900: #2C4A18; /* headings, strong body hsl(96, 51%, 19%) 10.00:1 */ /* The DEEP GROUND — hero, closing CTA band, topbar, footer. It used to be --green-900, and --green-900 is so dark that at full-band scale it reads as charcoal, not as this association's colour. An inventory of every painted pixel on the home page came back 59% white, 24% cream, 12.5% near-black green — and the brand green itself at 0.0%. This is the token that fixes that: same hue as --green (92°), light enough to read as GREEN, and still dark enough for the whole on-deep text scale. Measured on it: white 7.46:1 · --on-deep-muted 5.63:1 · --on-deep-faint 4.75:1 — all AA. --gold falls to 3.01:1 here and --green-300 to 2.17:1, so both stay barred as text on the dark ground, which is unchanged policy. */ --green-800: #385F16; /* deep band ground hsl(92, 62%, 23%) 7.46:1 */ /* OWNER RULING, 2026-09-04. The primary was #4E7A28 — hsl(92, 51%, 32%) — and read as a muted olive rather than a modern green. The muddiness came from its low CHROMA and a comparatively high red channel (78), not from its lightness. This raises saturation 51% → 62% and drops red 78 → 73 and blue 40 → 29 at the SAME hue: a cleaner, more vivid green that still sits beside the association's green logo badge as the same colour, which a shift of hue or a jump in lightness would not have done. Lightness could NOT also be raised. --green is a text colour on --surface-soft as well as on white (.eyebrow, .prose a), and anything above hsl(…, 30%) drops the sand-band ratio below 4.5:1. Measured: white 5.02:1 (was 5.07:1), --sand-50 4.52:1, and 5.02:1 for white text ON it as a header/button fill. All AA. */ --green: #497C1D; /* PRIMARY — header, buttons, links hsl(92, 62%, 30%) 5.02:1 */ --green-700: #3A6317; /* hover / pressed / --info hsl(92, 62%, 24%) 7.05:1 */ --green-300: #6B973B; /* decorative only — 3.43:1, NEVER text */ /* The COMPONENT tint. It replaces the tan --sand on icon tiles, avatars, numeral tiles and blank media blocks, which is where most of the page's beige actually came from — those are small but they are everywhere. It is a photometric drop-in for the tan, deliberately: --sand #E7E0C9 → 1.32:1 vs white, 1.19:1 vs --sand-50, --brand-strong on it 7.57:1 --green-200 #D5E5C8 → 1.32:1 vs white, 1.19:1 vs --sand-50, --brand-strong on it 7.56:1 So a tile separates from its card exactly as well as it did; it is simply the brand's colour instead of a beige. Anything lighter (--green-100 at 1.12:1) stops reading as a tile. */ --green-200: #D5E5C8; /* icon tiles, avatars, media placeholders hsl(92, 36%, 84%) */ --green-100: #EDF5E5; /* the lighter wash: --info-wash, selected rows, soft panels */ --gold: #C2A21E; /* decorative only — 2.48:1 on white, 4.04:1 on the green */ --gold-ink: #7A6410; /* the warm TEXT colour — 5.74:1 on white */ --gold-wash: #FBF3D4; --sand: #E7E0C9; --sand-50: #F6F3E9; /* ── Semantic roles ─────────────────────────────────────────────────────── */ /* site.css only ever names these. Swapping the identity palette above without touching this block is what makes a rebrand one file. */ --brand: var(--green); --brand-strong: var(--green-900); --brand-hover: var(--green-700); --brand-decor: var(--green-300); /* borders/fills — never text */ --accent: var(--gold); /* rules/emblems — never text */ --accent-ink: var(--gold-ink); --accent-wash: var(--gold-wash); --paper: #FFFFFF; --surface-soft: var(--sand-50); --surface-strong: var(--sand); --surface-deep: var(--green-800); --ink: #22271D; --ink-muted: #5B6353; --ink-faint: #8A9182; --on-deep: #FFFFFF; --on-deep-muted: rgba(255, 255, 255, .82); /* Raised from .66 in step with the lighter --surface-deep: it composites to 4.75:1 on the new ground, where .66 would have been 4.29:1 and failed AA. The two values move together. */ --on-deep-faint: rgba(255, 255, 255, .72); --line: #E3E5DE; --line-soft: #EFF0EB; /* A hairline that still reads when it sits ON --surface-soft / --surface-strong, where --line disappears. Used by table heads and the neutral file chip. */ --line-strong: #D2D6CB; --line-deep: rgba(255, 255, 255, .18); --row-hover: #FBFBF8; --surface-hover: #F2F0E6; /* hover fill for rows/tiles sitting ON --surface-soft */ /* Info role — the neutral "we are telling you something" triple. Green-family, never blue: a blue here would be the only non-brand hue on the page. 7.05:1 on white. */ --info: var(--green-700); --info-wash: var(--green-100); --info-line: #D3DEC6; /* ── Semantic scale. FOUR roles, each a fg/wash/line triple in the same shape, so no component ever has to invent one. These are the only non-brand hues in the system and they are confined to STATE: form validation, alerts, and the admin's status pills. The red PDF chip that used to be this site's one orphan red is gone — a documents list is not a warning list — so --danger now means exactly one thing: an error. */ --danger: #B3261E; /* 6.54:1 on white · 5.72:1 on its wash */ --danger-wash: #FDECEA; --danger-line: #F2C7C3; --danger-ink: #4A100C; --danger-hover: #8E1E17; --ok: #2F6B3A; /* 6.39:1 on white · 5.57:1 on its wash */ --ok-wash: #E8F2E9; --ok-line: #BFD9C4; /* The one amber, and it is a STATE colour rather than a brand hue: it exists so that «بحاجة إلى بيانات» (the applicant owes an action) is distinguishable at a glance from «قيد الدراسة» (the association owes one). Two gold-family pills meaning opposite things is the failure mode being avoided. It never appears on the public site. */ --warn: #7A4B10; /* 7.39:1 on white · 6.46:1 on its wash */ --warn-wash: #FBEEDC; --warn-line: #E4C48E; --field-bg: #FFFFFF; --field-fg: var(--ink); --field-line: #C9CEC2; --field-placeholder:#949B8C; --focus-ring: var(--brand); /* The primary at 28%. This is the one place a brand colour is restated as an rgba() literal — there is no colour-mix() on Chrome 81 (D12) — so it MOVES WITH --green. #497C1D = rgb(73, 124, 29). */ --focus-ring-soft: rgba(73, 124, 29, .28); --focus-ring-deep: #FFFFFF; --scrim: rgba(24, 30, 20, .5); --lightbox-bg: rgba(24, 30, 20, .93); --lightbox-chrome: rgba(255, 255, 255, .10); --lightbox-chrome-hover: rgba(255, 255, 255, .22); --lightbox-chrome-line: rgba(255, 255, 255, .40); --deep-fill: rgba(255, 255, 255, .07); --deep-fill-strong: rgba(255, 255, 255, .12); --skeleton-a: #EFF0EB; --skeleton-b: #F7F7F3; /* File-type chip on the documents list. ONE neutral pair, deliberately. The red PDF pair that used to be the default was the only red on the public site and it read as an error state on 100% of rows — a document list is not a warning list. A fork that genuinely scans by file type overrides --chip-neutral-* per extension. */ --chip-neutral-bg: var(--sand-50); --chip-neutral-fg: #4A5142; /* 7.4:1 on --sand-50 ✓ text */ --chip-neutral-line: var(--line-strong); /* Kept for the ADMIN, where scanning a table by file type is a real task. The public site no longer consumes them (see .doc__ext in site.css). */ --doc-pdf-bg: #F7E3E1; --doc-pdf-fg: #8E1E17; --doc-doc-bg: #E1E9F5; --doc-doc-fg: #1B4576; /* ── ServiceRequest lifecycle. Six states, six flat pairs. ADMIN ONLY — none of these appears on the public site except the read-only status on /requests/track. Every *-fg is >= 4.5:1 on its own *-bg. Recompute if a fork changes them. */ --st-submitted-bg: #EEF1EA; --st-submitted-fg: #3F4738; --st-submitted-line: #D8DDD2; --st-review-bg: var(--gold-wash); --st-review-fg: var(--gold-ink); --st-review-line: var(--gold); --st-needsinfo-bg: var(--warn-wash); --st-needsinfo-fg: var(--warn); --st-needsinfo-line: var(--warn-line); --st-approved-bg: var(--ok-wash); --st-approved-fg: var(--ok); --st-approved-line: var(--ok-line); --st-rejected-bg: var(--danger-wash); --st-rejected-fg: var(--danger); --st-rejected-line: var(--danger-line); --st-closed-bg: transparent; --st-closed-fg: var(--ink-muted);--st-closed-line: var(--line-strong); /* The