/* ============================================================================ SAFAR — CANONICAL TOKEN SHEET (Ashara 1446 design system) ---------------------------------------------------------------------------- Section 1 is the vendored design-system token sheet (docs/design/tokens.css) adopted VERBATIM — the single source of truth for the safar UI revamp. The ONLY deviations from the vendor file are the two ornament-strip URLs (the vendored `img/…` path 404s from `/css/`, so they point at `../assets/img/…`). Section 2 is the project override + project-local slots (LD content font, #stop-travel display step, selection colours, and the R6 tokenised pins / warn-action / start-hover / sharaf / nav affordance colours). Documented exceptions are called out inline. Section 3 is the `--av-*` compatibility alias layer: every legacy token name still used anywhere in web/ maps to its canonical target here, so existing rules keep working through the migration. Orphan legacy tokens (grep-confirmed zero uses) are intentionally absent. Migration map of record: docs/design/token-map.md. ============================================================================ */ /* ============================================================================ SECTION 1 — VENDORED CANONICAL TOKENS (docs/design/tokens.css, verbatim) Vendored 2026-07-06 from claude.ai/design project f69bb2cb-8dc1-41b1-a048-d1d3d3dfaf25 (assets/tokens.css) via DesignSync. Do not hand-edit; re-fetch to update — EXCEPT the two ornament URLs below. ============================================================================ */ /* ============================================================================ Waaz Streaming Portal — Canonical Token Sheet RE-SKINNED to the Al-Vazaratus Saifiyah "Ashara 1446" design language. Palette: antique GOLD ramp, warm sand/parchment/stone grounds, maroon & terracotta calligraphy accents, Islamic-tile accents. NO green as brand. Signature: pill controls, gold-gradient CTA, soft halo shadow, ornament strip. Token NAMES are preserved so every existing component re-skins automatically. ============================================================================ */ :root { /* ---- primary ramp = antique GOLD (theme-stable) ---- */ --color-primary-50: #FBF8EF; --color-primary-100: #F4ECD0; --color-primary-200: #E7D7A6; --color-primary-300: #D6B331; /* focus / active border */ --color-primary-400: #C9A227; /* star / emblem gold */ --color-primary-500: #9C873B; /* PRIMARY brand gold */ --color-primary-600: #877234; --color-primary-700: #6E5E29; /* deep antique gold — headers, links, active */ --color-primary-800: #574A20; --color-primary-900: #3E3416; /* ---- neutrals (warm parchment / ink) ---- */ --color-neutral-50: #F7F3E9; --color-neutral-100: #F3EFE5; /* parchment */ --color-neutral-200: #ECE5D3; --color-neutral-300: #E3DCC2; /* hairline / border */ --color-neutral-400: #B7AD8E; /* muted gold-grey */ --color-neutral-500: #747474; /* muted ink */ --color-neutral-700: #2A2A2A; /* softened body */ --color-neutral-900: #000000; /* ink — headings */ /* ---- semantic (paired foregrounds) — no green ---- */ --color-success: #6E5E29; --color-success-fg: #FFFFFF; /* "Active" = deep gold */ --color-success-50: #F1EAD3; --color-warning: #C38049; --color-warning-fg: #FFFFFF; /* "Scheduled" = terracotta */ --color-warning-50: #F8EEE3; --color-warning-text: #8A4F23; --color-error: #8B1A1A; --color-destructive: #8B1A1A; --color-destructive-fg: #FFFFFF; /* maroon */ --color-error-50: #F6E7E7; --color-info: #1F4E79; --color-info-fg: #FFFFFF; /* tile blue — community */ --color-info-50: #E8EEF4; --color-info-100: #D5E1EC; --color-live-dot: #AF1617; /* relay live red */ /* ---- brand accents (calligraphy & tiles) ---- */ --color-maroon: #8B1A1A; --color-maroon-bright: #AF1617; --color-terracotta: #C38049; --color-tile-green: #2E6B3E; /* decorative only (emblem) */ --color-tile-blue: #1F4E79; --color-tile-red: #B02A2A; --color-tile-gold: #C9A227; /* ---- signature gold gradient (every primary CTA) ---- */ --color-gradient-gold: linear-gradient(90deg, #A08A3D 0%, #D2A80F 100%); /* ---- surface aliases (LIGHT) — flip per theme ---- */ --color-background: #F4EFE2; /* warm sand-paper page */ --color-foreground: #1C1A12; /* warm ink headings */ --color-foreground-muted: #3A372C; /* warm dark body */ --color-card: #FFFFFF; --color-card-raised: #FFFFFF; --color-popover: #FFFFFF; --color-muted: #F1EBDC; /* parchment fill */ --color-border: #E3DCC2; --color-border-strong: #C9BF9E; --color-ring: #6E5E29; /* deep gold focus */ --color-primary: #9C873B; --color-primary-fg: #FFFFFF; /* ---- typography ---- */ --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Bebas Neue", "Rubik", sans-serif; --font-naskh: "Noto Naskh Arabic", "Noto Sans Arabic", serif; --font-base: 16px; --text-caption: 12px; --text-small: 14px; --text-body: 16px; --text-body-lg: 18px; --text-subtitle:20px; --text-h3: 24px; --text-h2: 32px; --text-h1: 40px; --lh-body: 1.6; --lh-heading: 1.15; --lh-subtitle: 1.4; /* ---- spacing (8-pt grid) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---- radii ---- */ --radius-sm: 6px; --radius-md: 10px; /* admin form controls */ --radius-lg: 16px; /* cards, dialogs, popovers */ --radius-xl: 16px; /* large media, player frame */ --radius-pill: 30px; /* SIGNATURE — buttons & inputs */ --radius-full: 9999px; /* ---- elevation ---- */ --shadow-none: none; --shadow-halo: 0 0 15px -5px rgba(0,0,0,0.7); /* SIGNATURE under inputs/cards */ --shadow-card: 0 10px 30px -12px rgba(110,94,41,0.35); /* warm gold-tinted */ --shadow-raised: 0 2px 10px rgba(0,0,0,0.08); --shadow-overlay: 0 12px 40px rgba(110,94,41,0.30); /* ---- motion ---- */ --ease-calm: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 400ms; /* signature "all 0.4s" */ /* ---- ornament ---- */ /* DEVIATION FROM VENDOR: vendored `url("img/…")` 404s when resolved from /css/tokens.css; repoint at the vendored strips under web/assets/img/. */ --ornament-strip: url("../assets/img/top-border.png"); --ornament-strip-bottom: url("../assets/img/bottom-border.png"); --strip-height: 43px; /* ============================================================ RESPONSIVE & ADAPTIVE (mobile dp-based + TV title-safe) ============================================================ */ --bp-compact-min: 360px; --bp-compact: 360px; --bp-large: 430px; --bp-expanded: 600px; --bp-tv: 960px; --gutter: 16px; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --tap-min: 48px; --tv-safe-x: 5%; --tv-safe-y: 5%; } /* large-text mode (bedridden / low-vision) — bumps the whole type ramp. */ html[data-text-size="lg"], .bigtext { --font-base: 18px; --text-caption: 13px; --text-small: 15px; --text-body: 18px; --text-body-lg: 20px; --text-subtitle: 22px; --text-h3: 26px; --text-h2: 34px; --text-h1: 42px; } html[data-text-size="xl"], .bigtext-xl { --font-base: 20px; --text-caption: 14px; --text-small: 16px; --text-body: 20px; --text-body-lg: 22px; --text-subtitle: 24px; --text-h3: 28px; --text-h2: 36px; --text-h1: 44px; } /* ============================ DARK THEME (warm) ============================ */ .dark { --color-background: #1A1710; --color-foreground: #F0E9D2; --color-foreground-muted: #C9BFA0; --color-card: #221E15; --color-card-raised: #2A2519; --color-popover: #2A2519; --color-muted: #2A2519; /* Neutral surface stops used as fills by legacy --av-parchment/--av-stone (display header, control sidebar) — override so those chrome surfaces theme with the rest instead of staying light. */ --color-neutral-50: #1E1A12; --color-neutral-100: #221E15; --color-neutral-200: #2A2519; --color-neutral-300: #3A3322; /* Neutral TEXT stops: --av-ink-soft (body) and --av-muted (secondary) alias to these and are near-black in :root — flip to legible warm inks so table rows, form fields, and display meta values clear WCAG AA on the dark surfaces above. */ --color-neutral-700: #E4DBC4; /* --av-ink-soft body text */ --color-neutral-500: #B0A588; /* --av-muted secondary text (>= 4.5:1 on #221E15) */ /* Deep-gold TEXT stops used by status pills / stop numbers / active nav (--av-gold-900/-800) — lift into the legible dark-mode gold family. */ --color-primary-700: #D6B331; --color-primary-800: #C9A227; --color-border: #3A3322; --color-border-strong: #574A2E; /* "Live" badge text + maroon note copy need brighter faces on dark. */ --color-live-dot: #F26D6E; /* badge text/dot legible on #221E15 (pulse still reads) */ --color-maroon: #E88A8A; --color-ring: #D6B331; --color-primary: #C9A227; --color-primary-fg: #1A1710; --color-primary-50: #221E15; --color-primary-100: #2E2716; --color-success: #C9A227; --color-success-50: #2A2410; --color-warning: #D29A63; --color-warning-50: #2A2114; --color-warning-text: #E6B780; --color-info: #5A8FC0; --color-info-50: #16202A; --color-info-100: #1E2E3C; --color-error: #C25A5A; --color-destructive: #C25A5A; --color-error-50: #2A1818; --shadow-halo: 0 0 15px -4px rgba(0,0,0,0.85); --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.6); --shadow-raised: 0 2px 10px rgba(0,0,0,0.5); --shadow-overlay: 0 12px 40px rgba(0,0,0,0.65); } /* root font-size drives the whole rem ramp */ html { font-size: var(--font-base); } /* ============================================================================ SECTION 2 — SAFAR PROJECT OVERRIDES + PROJECT-LOCAL SLOTS ============================================================================ */ :root { /* ---- LD content font override (user directive) ---- Kanz al-Marjaan is the safar Lisan al-Dawat content face and must win the --font-naskh slot ahead of the vendored Noto fallback. */ --font-naskh: "Kanz al-Marjaan", "Noto Naskh Arabic", serif; /* ---- project-local type step (no system counterpart) ---- The old --av-text-4xl (49px). Used by #stop-travel + the login emblem. */ --text-display-4xl: 49px; /* ---- selection colours (no system slot — kept at current values) ---- */ --color-selection-bg: #9C873B; --color-selection-fg: #FFFFFF; /* ---- R6 tokenised map-pin colours (current values) ---- */ --color-pin-active: #B8912F; --color-pin-visited: #B9B0A0; --color-pin-pending: #8A7434; /* ---- R6 tokenised warn-action (destructive-secondary) colours ---- */ --color-warn-action: #b45309; --color-warn-action-hover: #92400e; /* ---- start-button hover ---- */ --color-start-hover: #275a34; /* exception: user-approved green */ /* ---- sharaf group accents ---- */ --color-sharaf-jamaat: #0f7b6c; /* exception: user-approved green */ --color-sharaf-madrasa: #5e4b8b; /* ---- navigation affordance colours (Google-Maps vocabulary) ---- */ --color-nav-teal: #0f7b6c; /* exception: navigation affordance */ --color-nav-blue: #1A73E8; /* exception: navigation affordance */ } /* ============================================================================ SECTION 3 — LEGACY `--av-*` COMPATIBILITY ALIASES Every legacy token name still referenced anywhere in web/ maps to its canonical target (per docs/design/token-map.md). "VALUE CHANGE" comments mark aliases whose resolved value now differs from the pre-revamp literal — that shift is the intended 100%-match behaviour, not a regression. Orphan legacy tokens (grep-confirmed zero uses) are intentionally omitted: --av-gold-500, --av-space-8, --av-space-9, --av-font-body-alt, --av-tile-red, --av-ornament-border, --av-fw-black. ============================================================================ */ :root { /* ---- gold ramp ---- */ --av-gold-900: var(--color-primary-700); /* #6E5E29 exact */ --av-gold-700: var(--color-primary-500); /* #9C873B exact — PRIMARY gold */ --av-gold-400: var(--color-primary-400); /* #C9A227 exact */ --av-gold-300: var(--color-primary-300); /* #D6B331 exact — focus/active border */ --av-gold-active: var(--color-primary-600); /* #967A4A -> #877234 nearest ramp stop */ --av-gold-800: var(--color-primary-800); /* was undefined — broken ref now resolves */ /* gradient endpoints: no canonical slot, kept literal so the two hover sites using --av-gold-200 stay pixel-identical. */ --av-gold-600: #A08A3D; /* gradient START */ --av-gold-200: #D2A80F; /* gradient END — also used by :hover accents */ /* ---- grounds & neutrals ---- */ --av-sand: var(--color-background); /* VALUE CHANGE: #F0E9B1 -> #F4EFE2 */ --av-parchment: var(--color-neutral-100); /* #F3EFE5 exact */ --av-stone: var(--color-neutral-50); /* VALUE CHANGE: #F5F5F4 -> #F7F3E9 */ --av-paper: var(--color-card); /* #FFFFFF exact */ --av-ink: var(--color-foreground-muted); /* VALUE CHANGE: #000 -> #3A372C (body ink) */ --av-ink-soft: var(--color-neutral-700); /* #2A2A2A exact */ --av-muted: var(--color-neutral-500); /* #747474 exact */ --av-line: var(--color-neutral-300); /* #E3DCC2 exact */ /* ---- semantic & accents ---- */ --av-maroon: var(--color-maroon); /* #8B1A1A exact */ --av-maroon-bright: var(--color-maroon-bright); /* #AF1617 exact */ --av-terracotta: var(--color-terracotta); /* #C38049 exact */ --av-tile-green: var(--color-tile-green); /* exact */ --av-tile-blue: var(--color-tile-blue); /* exact */ --av-tile-gold: var(--color-tile-gold); /* exact */ --av-danger: var(--color-error); /* VALUE CHANGE: #FF0000 -> #8B1A1A (no pure red) */ --av-on-gold: var(--color-primary-fg); /* #FFFFFF exact */ --av-selection-bg: var(--color-selection-bg); --av-selection-fg: var(--color-selection-fg); /* ---- signature gradient ---- */ --av-gradient-gold: var(--color-gradient-gold); /* exact */ /* ---- typography: families ---- */ --av-font-sans: var(--font-sans); /* exact Rubik stack */ --av-font-display: var(--font-display); /* exact Bebas stack */ /* ---- typography: weights (no system weight tokens — kept literal) ---- */ --av-fw-light: 300; --av-fw-regular: 400; --av-fw-medium: 500; --av-fw-semibold: 600; --av-fw-bold: 700; /* ---- typography: type scale ---- */ --av-text-xs: var(--text-caption); /* 12 exact */ --av-text-sm: var(--text-small); /* 14 exact */ --av-text-base: var(--text-body); /* 16 exact */ --av-text-md: var(--text-body-lg); /* 18 exact */ --av-text-lg: var(--text-subtitle); /* 20 exact */ --av-text-xl: var(--text-h3); /* VALUE CHANGE: 25 -> 24 */ --av-text-2xl: var(--text-h2); /* VALUE CHANGE: 31 -> 32 */ --av-text-3xl: var(--text-h1); /* VALUE CHANGE: 39 -> 40 */ --av-text-4xl: var(--text-display-4xl); /* 49 (project-local slot) */ /* ---- typography: leading ---- */ --av-leading-tight: var(--lh-heading); /* 1.15 exact */ --av-leading-snug: var(--lh-subtitle); /* VALUE CHANGE: 1.35 -> 1.4 */ --av-leading-normal: var(--lh-body); /* 1.6 exact */ /* ---- spacing ---- */ --av-space-1: var(--space-1); /* 4 exact */ --av-space-2: var(--space-2); /* 8 exact */ --av-space-3: var(--space-3); /* 12 exact */ --av-space-4: var(--space-4); /* 16 exact */ --av-space-5: var(--space-6); /* 24 exact */ --av-space-6: var(--space-8); /* 32 exact */ --av-space-7: var(--space-12); /* 48 exact */ /* ---- radii ---- */ --av-radius-pill: var(--radius-pill); /* 30 exact */ --av-radius-lg: var(--radius-lg); /* 16 exact */ --av-radius-md: var(--radius-md); /* 10 exact */ --av-radius-sm: var(--radius-sm); /* 6 exact */ /* ---- elevation ---- */ --av-shadow-halo: var(--shadow-halo); /* exact */ --av-shadow-card: var(--shadow-card); /* exact */ --av-shadow-soft: var(--shadow-raised); /* exact */ /* ---- borders (composite; references canonical focus ramp) ---- */ --av-border-focus: 3px solid var(--color-primary-300); /* ---- motion ---- Single-value aliases. --av-transition kept as a composite `all ` so existing `transition: var(--av-transition)` rules keep working. */ --av-ease: var(--ease-calm); --av-transition: all var(--dur-slow) var(--ease-calm); /* was `all 0.4s` */ --av-transition-fast: all var(--dur-fast) var(--ease-calm); /* was `all 0.2s` */ /* ---- layout ---- */ --av-strip-height: var(--strip-height); /* 43 exact */ --av-form-width: 563px; /* project-local (login form width) */ --av-container: 1140px; /* project-local */ /* ---- ornament ---- */ --av-ornament-strip: var(--ornament-strip); /* -> ../assets/img/top-border.png */ } /* Reduced-motion: preserve the pre-revamp behaviour of nulling the transition aliases until base.css's global `*{…0.01ms}` reset lands (U3). */ @media (prefers-reduced-motion: reduce) { :root { --av-transition: none; --av-transition-fast: none; } }