/* PHASE 9 UI: design tokens — sky-blue rebrand + marsoud-shape naming. Every colour, radius, shadow, and typography step lives here. Every component reads from these vars. To rebrand: change --ms-brand and nowhere else. The old --brand-* aliases stay so the rest of the app keeps working while we roll out marsoud shape page-by-page. */ :root { /* ---- Brand — sky blue, replaces the old emerald ---- */ /* Softened from the original client pick (#43b9e9) — same hue family, pulled down in saturation/lightness for a calmer, less "AI-generated" feel closer to marsoud's muted tone. Dark/mid/tint/soft ramps recomputed from this base, same relationships as before. */ --ms-brand: #3aa0d1; /* softened sky blue */ --ms-brand-dark: #29799e; --ms-brand-mid: #5cb3da; --ms-brand-tint: #EAF4F9; /* nav-item hover, chip fills */ --ms-brand-soft: #DCEBF3; /* stat-tile brand tone bg */ /* ---- Semantic (used inside dashboard tiles + panels) ---- */ --ms-success: #16a34a; --ms-success-soft: #dcfce7; --ms-warning: #d97706; --ms-warning-soft: #fef3c7; --ms-danger: #dc2626; --ms-danger-soft: #fee2e2; --ms-info: #2563eb; --ms-info-soft: #dbeafe; --ms-teal: #0e9b86; --ms-teal-soft: #e3f6f2; --ms-violet: #6a52c4; --ms-violet-soft: #efebfb; --ms-amber: var(--ms-warning); --ms-amber-soft: var(--ms-warning-soft); /* ---- Ink — 4-step text hierarchy ---- */ --ms-ink-1: #0f172a; /* strongest — headings, values */ --ms-ink-2: #334155; /* body text */ --ms-ink-3: #64748b; /* meta / muted */ /* Was #94a3b8 (2.85:1 on white — fails WCAG AA, also reads as washed-out/pale, part of the "too light" feel). Matches marsoud's own --ms-ink-4 value (4.68:1, passes AA). */ --ms-ink-4: #64748b; /* placeholders */ /* ---- Surfaces ---- */ --ms-surface: #ffffff; --ms-surface-soft: #f8fafc; /* Matched exactly to the dashboard pilot's #f8f9ff (M3 "surface") so the whole app sits on the same background, not just the dashboard's #dash-root scope. */ --ms-bg: #f8f9ff; --ms-app-bg: #f8f9ff; /* ---- Lines ---- */ --ms-line: #e5e7eb; --ms-line-strong: #cbd5e1; /* ---- Structure ---- */ --ms-radius-sm: 8px; --ms-radius-md: 12px; --ms-radius-lg: 16px; --ms-radius-pill: 9999px; --ms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --ms-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --ms-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.09); /* ---- Typography ---- */ /* Site-wide M3 rollout: Plus Jakarta Sans (Latin) + Noto Sans Arabic (Arabic) are now the base font everywhere, matching the dashboard pilot. Tajawal/Cairo kept as fallback in case either Google Font fails to load (same defense as the Material Symbols lesson). */ --ms-font-sans: "Plus Jakarta Sans", "Noto Sans Arabic", "Tajawal", "Cairo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ms-font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Site-wide ~90% scale-down (matches the dashboard's zoomed-out feel) — same reasoning as Tailwind's fontSize pass in base.html. */ --ms-fs-xs: 10px; --ms-fs-sm: 11px; --ms-fs-base: 12px; --ms-fs-lg: 13px; --ms-fs-xl: 16px; --ms-fs-h1: 19px; /* ---- Shell measurements ---- */ --sidebar-w: 255px; --topbar-h: 64px; /* ---- Back-compat aliases — the rest of the app still reads these. Every consumer of --brand* now automatically wears the new blue. ---- */ --brand: var(--ms-brand); --brand-dark: var(--ms-brand-dark); --brand-mid: var(--ms-brand-mid); --brand-tint: var(--ms-brand-tint); --brand-soft: var(--ms-brand-soft); --neutral: var(--ms-line); --neutral-soft: var(--ms-line); --neutral-bg: var(--ms-bg); --ink-1: var(--ms-ink-1); --ink-2: var(--ms-ink-2); --ink-3: var(--ms-ink-3); --ink-4: var(--ms-ink-4); --surface: var(--ms-surface); --surface-soft: var(--ms-surface-soft); --success: var(--ms-brand); /* semantic success = brand */ --success-soft: var(--ms-brand-tint); --warning: var(--ms-warning); --warning-soft: var(--ms-warning-soft); --danger: var(--ms-danger); --danger-soft: var(--ms-danger-soft); --info: var(--ms-info); --info-soft: var(--ms-info-soft); --radius-sm: var(--ms-radius-sm); --radius: var(--ms-radius-md); --radius-lg: var(--ms-radius-lg); --shadow-sm: var(--ms-shadow-sm); --shadow: var(--ms-shadow-md); --shadow-lg: var(--ms-shadow-lg); /* ---- Bootstrap 5 variable overrides ---- 70 templates use Bootstrap classes. Overriding Bootstrap's own vars here means those classes wear the new palette without editing a single template. */ --bs-primary: var(--ms-brand); --bs-primary-rgb: 67, 185, 233; --bs-success: var(--ms-success); --bs-success-rgb: 22, 163, 74; --bs-danger: var(--ms-danger); --bs-danger-rgb: 220, 38, 38; --bs-warning: var(--ms-warning); --bs-warning-rgb: 217, 119, 6; --bs-info: var(--ms-info); --bs-info-rgb: 37, 99, 235; --bs-body-bg: var(--ms-bg); --bs-body-color: var(--ms-ink-2); --bs-heading-color: var(--ms-ink-1); --bs-border-color: var(--ms-line); --bs-border-radius: var(--ms-radius-md); --bs-border-radius-sm: var(--ms-radius-sm); --bs-link-color: var(--ms-brand-dark); --bs-link-hover-color: var(--ms-brand); --bs-font-sans-serif: var(--ms-font-sans); --bs-nav-pills-link-active-bg: var(--ms-brand); --bs-nav-pills-link-active-color: #fff; --bs-nav-link-color: var(--ms-ink-2); --bs-nav-link-hover-color: var(--ms-brand-dark); --bs-focus-ring-color: rgba(67, 185, 233, 0.25); --bs-secondary: var(--ms-ink-3); --bs-secondary-rgb: 100, 116, 139; } /* Bootstrap `.btn-primary` computes hover/active from CSS vars we don't touch — force the sky blue explicitly so the hover state matches the rest of the app. */ .btn-primary, .btn-primary:focus { background-color: var(--ms-brand); border-color: var(--ms-brand); color: #fff; } .btn-primary:hover, .btn-primary:active, .btn-primary.active { background-color: var(--ms-brand-dark) !important; border-color: var(--ms-brand-dark) !important; color: #fff !important; } .btn-outline-primary { color: var(--ms-brand-dark); border-color: var(--ms-brand); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--ms-brand); border-color: var(--ms-brand); color: #fff; }