/* ═══════════════════════════════════════════════════════════════════ بالِ — design tokens. Single source of truth. ------------------------------------------------------------------- Before this file, 30 of the 34 pages carried their OWN inline :root block. They had drifted into four different palettes. A colour now lives in exactly one place. ── ARCHITECTURE — READ BEFORE RENAMING ANYTHING ────────────────── The runtime JS (bali/pages/*.js, bali/components/*.js) INJECTS markup that hard-codes the ORIGINAL token names: var(--terra) var(--navy) var(--olive) var(--slate) var(--cream) var(--paper) var(--rule) var(--display) var(--sans) var(--mono) class="chip terra" data-tint="navy|terra|olive" Rename those and the featured-therapist cards, the city rows and the signed-in hero silently lose their styling. So this file has two layers: LAYER 1 the real palette — --forest/--kelly/--mint/... New code uses these. LAYER 2 a compatibility alias layer. The OLD names survive, but their VALUES now point into the new palette. That is what keeps the injected markup styled without touching the JS. Do not delete it until the JS is swept. ── CONTRAST — measured, not guessed ────────────────────────────── Against the page ground (--cream #F7F5EF): Forest #015D67 7.17:1 ✓ AA — text, links, ALL buttons Ink #06262B 15.00:1 ✓ AAA — body copy Kelly #00ACB1 2.63:1 ✗ FAIL — decorative ONLY Mint #87E4DB 1.40:1 ✗ FAIL — decorative ONLY Pista #CAF0C1 1.18:1 ✗ FAIL — decorative ONLY Kelly is the colour that LOOKS most like the brand and it is the one you cannot press. It is not a button. It is not a link. It is not text. If you need something clickable, it is Forest. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── LAYER 1 · the palette ──────────────────────────────────────── */ /* Brand — the client's exact hexes */ --forest: #015D67; /* ← THE ACTION COLOUR. Buttons, links, text. */ --forest-deep: #014249; /* hover / pressed */ --kelly: #00ACB1; /* accent — DECORATIVE ONLY (2.63:1) */ --mint: #87E4DB; /* signature — DECORATIVE ONLY (1.40:1) */ --pista: #CAF0C1; /* soft accent — DECORATIVE ONLY */ /* Teal-tinted greys, from the client's G-scale */ --g88: #1F6C75; --g72: #47878E; --g56: #70A2A7; --g40: #99BDC1; --g32: #ADC9CD; --g24: #C2D7DA; --g16: #D5E4E6; --g10: #E5EEEF; /* Warm neutrals — the ground is WARM (#F7F5EF), per the brand call. The client's cool G2–G8 are kept above for tints and borders, but the page itself is cream: this is a product people open in distress, and a clinical grey-white is the wrong room to do that in. */ --cream: #F7F5EF; /* page background */ --cream-deep: #EFEBE0; /* alt surface, trust strip, footer */ --cream-soft: #F3F0E7; --paper: #FFFDF9; /* card surface — warm white, not pure white */ --paper-2: #FBF9F3; /* Ink — added. The palette's darkest was Forest at 7.17:1, which is excellent for headings and thin for 15px body copy over a long page. */ --ink: #06262B; /* 15.00:1 — body copy */ --ink-soft: #33514F; /* 8.15:1 — secondary */ --muted: #4F7278; /* 4.94:1 — meta, captions. Still AA. */ --faint: #8AA3A6; /* decorative only */ --rule: #E4E0D4; /* hairlines */ --rule-soft: #EFEBE1; /* ── CRISIS. Clay. ────────────────────────────────────────────── Reserved EXCLUSIVELY for the crisis button and destructive actions (cancel session, delete account). It appears nowhere else, which is precisely what makes it read as exceptional when it does. Deliberately NOT red: a blaring red crisis button induces panic in the one person already panicking. The button must be FINDABLE, not ALARMING. Clay is warm, urgent, unmistakably not-teal, and passes AA as a white-on button (6.41:1). */ --clay: #9E4230; /* the crisis BUTTON — 6.41:1 under white */ --clay-deep: #7E3426; /* hover */ --clay-soft: #C4553C; /* tints/borders only — 4.46:1, NOT a button */ --clay-tint: #F7E5DE; /* States */ --amber: #B8862B; --amber-tint: #F8EFD9; /* caution, pending */ --grow: #3F7D52; --grow-tint: #E2EFE5; /* success */ /* ── Type ─────────────────────────────────────────────────────── Fraunces (serif) carries the emotional register — it is what makes this read as human rather than clinical. Inter does the legible UI work. Cairo carries the Arabic; the brand name is Arabic-only. --display/--sans/--mono keep their names: the JS references them. */ --serif: "Fraunces", "Cairo", Georgia, "Times New Roman", serif; --display: "Fraunces", "Cairo", Georgia, "Times New Roman", serif; --sans: "Inter", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", "Cairo", ui-monospace, "SF Mono", Menlo, monospace; --arabic: "Cairo", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif; --t-hero: 88px; --t-display: 48px; --t-h1: 36px; --t-h2: 28px; --t-h3: 22px; --t-lead: 18px; --t-body: 15px; --t-small: 13px; --t-micro: 11px; /* ── Mood data ramp (1 low → 5 high) ──────────────────────────── THE data-viz scale for patient mood, shared by the therapist console's pills (clients) and bars (patient-detail) — previously two hand-maintained hex sets. -tint/-deep pairs are for pill surfaces (tint bg + deep text, AA on cream); the bare value is the solid bar/graph colour. s5 deliberately lands on Kelly so "great" reads as the brand's decorative teal. */ --mood-1: #B85C5C; --mood-1-tint: #F7DADA; --mood-1-deep: #823333; --mood-2: #C97D5C; --mood-2-tint: #F6E0D7; --mood-2-deep: #84462F; --mood-3: #BEA665; --mood-3-tint: #F1E9D2; --mood-3-deep: #75603A; --mood-4: #8FA66B; --mood-4-tint: #E3EACF; --mood-4-deep: #5A6840; --mood-5: var(--kelly); --mood-5-tint: #D4DEC0; --mood-5-deep: #4A5635; /* ── Radii ──────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ── Spacing ────────────────────────────────────────────────────── */ --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; /* ── Elevation — warm-tinted, so shadows sit ON the cream instead of cooling it off ─────────────────────────────────────────────── */ --shadow-xs: 0 1px 1px rgba(6,38,43,0.04); --shadow-sm: 0 1px 2px rgba(6,38,43,0.05), 0 1px 1px rgba(6,38,43,0.03); --shadow-md: 0 6px 22px -10px rgba(6,38,43,0.16), 0 2px 6px rgba(6,38,43,0.04); --shadow-lg: 0 24px 60px -28px rgba(6,38,43,0.30), 0 6px 16px rgba(6,38,43,0.06); --shadow-brand: 0 10px 30px -12px rgba(1,93,103,0.35); /* ── Motion ─────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --t-fast: 120ms; --t-base: 220ms; --t-slow: 400ms; --focus: 0 0 0 2px var(--cream), 0 0 0 4px var(--forest); /* ══ LAYER 2 · COMPATIBILITY ALIASES ═════════════════════════════ The old names, repointed. The runtime JS emits markup referencing these; deleting them breaks featured-therapist cards, city rows and the signed-in hero. See the header. */ /* terra was the primary accent → now the Forest ACTION colour */ --terra: var(--forest); --terra-deep: var(--forest-deep); --terra-tint: var(--g16); --terra-wash: var(--g10); /* navy was ink + trust → now the true ink */ --navy: var(--ink); --navy-soft: var(--ink-soft); --navy-tint: var(--g16); /* olive → the SUCCESS green. I first aliased this to --mint, assuming olive was decorative. It is NOT. Grep says olive is a BUTTON BACKGROUND carrying cream text (banners/review.js, crisis-button.js, booking.js, availability.html) and semantically it means SUCCESS: the ✓ circle, "Already saved", the OK icon, the "moved" tag. Mint under white is 1.48:1 — the "Leave a review" button came out unreadable. --grow keeps the meaning AND carries a label (white on it: 4.92:1). */ --olive: var(--grow); /* #3F7D52 — 4.92:1 under white ✓ AA */ --olive-deep: #2C6B41; /* 6.39:1 under white ✓ */ --olive-tint: var(--grow-tint); /* slate was muted text → now the warm-teal grey */ --slate: var(--muted); --slate-soft: var(--faint); /* Orphans rescued from the stripped page-level :root blocks. Each was referenced with NO fallback, so losing it left the rule dead: --body auth pages → was the system sans stack --taupe dashboard → was #8A8073, a warm muted grey --shadow-hero dashboard → was a large hero shadow */ --body: var(--sans); --taupe: var(--muted); --shadow-hero: var(--shadow-lg); /* semantic passthroughs the JS reads */ --bg: var(--cream); --surface: var(--paper); --text: var(--ink); --text-muted: var(--muted); --text-faint: var(--faint); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms; } } /* ═══════════════════════════════════════════════════════════════════ [hidden] MUST WIN. ------------------------------------------------------------------- The browser's own `[hidden] { display: none }` is a bare attribute selector (0,1,0). ANY class rule that sets `display` out-specifies it, so an element carrying BOTH `class="thing"` and the `hidden` attribute stays on screen. That is not hypothetical: intake.html's `.save-success-top{display:flex}` beat it, so the "Saved." banner was painted on page load — announcing a save that had never happened. ~25 elements across 10 pages are toggled via the hidden attribute, and every one of them was one `display` rule away from the same bug. `!important` is deliberate: the whole point is that this cannot be out-specified. To hide-then-animate an element, drive it from a class, not from `hidden`. ═══════════════════════════════════════════════════════════════════ */ [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ The brand name is ARABIC ONLY — بالِ. There is no Latin "BaLi". Anywhere the name is set as live text it must use --arabic. ═══════════════════════════════════════════════════════════════════ */ .brand-name { font-family: var(--arabic); font-weight: 800; color: var(--forest); line-height: 1; display: inline-block; } .brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .brand-lockup img { display: block; } /* ═══════════════════════════════════════════════════════════════════ DARK SURFACES — re-point the aliases. ------------------------------------------------------------------- --terra used to be a LIGHT terracotta, so it read fine as an accent ON a dark navy card. It now aliases to DARK Forest — so every accent sitting on a dark surface vanished: the featured pricing card's "STEADY PACK" and "SAVE 5%", the diaspora card's eyebrow and city counts, the hero's verified badge. Because custom properties CASCADE, re-declaring them inside the dark container fixes every descendant at once — no per-rule overrides, and it keeps working for markup the JS injects later (the city rows are built at runtime). Any new dark surface should just get class="on-dark". ═══════════════════════════════════════════════════════════════════ */ .on-dark, .pack.featured, .diaspora-card, .card-c { --terra: var(--mint); /* accents go LIGHT on dark */ --terra-deep: var(--kelly); --terra-tint: rgba(135,228,219,0.18); --terra-wash: rgba(135,228,219,0.10); /* olive is a BUTTON BG carrying white text even on dark — keep it green, not mint. Only the TINT goes translucent. */ --olive: var(--grow); --olive-deep: #2C6B41; --olive-tint: rgba(63,125,82,0.28); --text: #ffffff; --ink: #ffffff; --ink-soft: var(--g24); --text-muted: var(--g32); --text-faint: var(--g40); --slate: var(--g32); --slate-soft: var(--g40); --muted: var(--g32); --rule: rgba(255,255,255,0.12); --cream: var(--ink); --cream-deep: rgba(255,255,255,0.06); --paper: rgba(255,255,255,0.06); --surface: rgba(255,255,255,0.06); }