/* Inter — self-hosted (copied from the Ummah app's brand fonts). Body stack falls back DM Sans → Inter → system; these faces make Inter actually load. */ @font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('/fonts/Inter-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} *{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#FAFAF8;--bg-card:#ffffff;--bg-hover:#f0f4f8;--bg-subtle:#edf2f7; --border:#E2E8F0;--border-light:#EDF2F7; --text:#0D1117;--text-secondary:#4A5568;--text-muted:#64748B; --accent:#0056A4;--accent-light:#e8f2fc;--accent-dark:#004485; --sky:#6AABE5;--sky-light:#e0f0fb; --green:#16a34a;--green-light:#dcfce7;--green-dark:#15803d; --amber:#d97706;--amber-light:#fef3c7; --red:#dc2626;--red-light:#fee2e2; --purple:#7c3aed;--purple-light:#ede9fe; --cyan:#06b6d4; --pink:#EC4899; --text-on-dark-muted:rgba(255,255,255,0.5); --sidebar:#0D1B2A;--sidebar-hover:rgba(106,171,229,0.1);--sidebar-active:rgba(106,171,229,0.18); --radius:10px;--radius-sm:6px;--radius-md:8px;--radius-lg:14px;--radius-xl:16px;--radius-3xl:24px;--radius-pill:999px; --shadow:0 1px 3px rgba(0,86,164,0.06),0 1px 2px rgba(16,24,40,0.05); --shadow-sm:0 1px 3px rgba(16,24,40,0.08),0 1px 2px -1px rgba(16,24,40,0.04); --shadow-md:0 4px 16px rgba(0,86,164,0.1); --shadow-lg:0 10px 18px -4px rgba(16,24,40,0.08),0 4px 8px -4px rgba(16,24,40,0.04); --primary:#0056A4;--primary-50:#E5EDF5;--primary-100:#C2DDFF;--primary-dark:#004999; --sky-tint:rgba(106,171,229,0.18);--sky-glass:rgba(106,171,229,0.08); --success:#16a34a;--card:#ffffff; /* Semantic status tokens — solid / bg-tint / fg-text triads. */ --danger:#DC2626;--danger-bg:#fee2e2;--danger-fg:#991b1b; --warn:#D97706;--warn-bg:#fef3c7;--warn-fg:#92400e; --info:#0056A4;--info-bg:#E8F0F5;--info-fg:#0056A4; --success-bg:#dcfce7;--success-fg:#15803d; --ease-out:cubic-bezier(0.22,0.61,0.36,1);--duration-fast:120ms;--duration-base:180ms; --ring-primary:0 0 0 4px rgba(0,86,164,0.18); /* Page background — Ummah signature gradient: F8FAFD → DFE6F3, top to bottom */ --bg-page:linear-gradient(180deg,#F8FAFD 0%,#EAF1FA 50%,#DFE6F3 100%); --bg-glass:rgba(253,253,254,0.55); --bg-glass-border:rgba(255,255,255,0.55); } /* DARK MODE — opt-in via [data-theme="dark"] on . Applied by the theme toggle in the topbar; persists to localStorage. The sidebar is already dark (#0D1B2A) so it stays the same in both modes. Navy primary + sky accent also stay identical — brand colors don't shift. Variables NOT overridden here keep their light values: --primary, --primary-dark, --sky, --accent (brand) and all the --radius/--ease/ --duration tokens (geometry/motion, theme-independent). Reference: project_dashboard_design_canon memory. */ [data-theme="dark"]{ /* Surface ramp — more separation between canvas, card, hover. */ --bg:#0B0E13; --bg-card:#181C24; --bg-hover:#222732; --bg-subtle:#13171E; /* Borders — lift alpha so card edges read on dark surfaces. */ --border:rgba(255,255,255,0.16); --border-light:rgba(255,255,255,0.10); /* Text — bump all three steps for stronger contrast. WCAG AAA on body, AA on muted. */ --text:#F5F7FA; --text-secondary:#C8CFD8; --text-muted:#9CA5B0; /* Accent — lift navy to a brighter blue against dark canvas. */ --accent:#3B8FE0; --accent-light:rgba(59,143,224,0.20); --accent-dark:#2876C7; /* Sky tint stays on the same hue, lifted slightly. */ --sky-light:rgba(106,171,229,0.22); /* Semantic backgrounds — bump alpha so pill backgrounds read. */ --green-light:rgba(22,163,74,0.24); --amber-light:rgba(217,119,6,0.26); --red-light:rgba(220,38,38,0.26); --purple-light:rgba(124,58,237,0.26); /* Shadows — punchier in dark so cards lift visibly. */ --shadow:0 1px 3px rgba(0,0,0,0.50),0 1px 2px rgba(0,0,0,0.40); --shadow-sm:0 2px 6px rgba(0,0,0,0.50),0 1px 2px -1px rgba(0,0,0,0.35); --shadow-md:0 6px 18px rgba(0,0,0,0.55); --shadow-lg:0 14px 28px -4px rgba(0,0,0,0.65),0 6px 12px -4px rgba(0,0,0,0.45); --primary-50:rgba(59,143,224,0.18); --primary-100:rgba(59,143,224,0.28); --sky-tint:rgba(106,171,229,0.26); --sky-glass:rgba(106,171,229,0.12); --card:#181C24; --bg-page:linear-gradient(180deg,#0B0E13 0%,#13171E 50%,#181C24 100%); --bg-glass:rgba(31,35,42,0.65); --bg-glass-border:rgba(255,255,255,0.10); --ring-primary:0 0 0 4px rgba(59,143,224,0.40); /* Semantic status tokens — lifted hues + alpha tints for dark surfaces. */ --danger:#f87171;--danger-bg:rgba(220,38,38,0.18);--danger-fg:#fca5a5; --warn:#fbbf24;--warn-bg:rgba(217,119,6,0.16);--warn-fg:#fcd34d; --info:#6AABE5;--info-bg:rgba(106,171,229,0.14);--info-fg:#9cc8f0; --success:#4ade80;--success-bg:rgba(22,163,74,0.16);--success-fg:#86efac; /* MK-* parallel token system used by Newsletter, Content Calendar, mk-cards, nl-* drawers. Mirror in dark so those surfaces switch. */ --mk-bg:var(--bg); --mk-surface:var(--bg-card); --mk-text:var(--text); --mk-text-muted:var(--text-muted); --mk-border:var(--border); --mk-border-strong:rgba(255,255,255,0.22); --mk-sky-tint:rgba(106,171,229,0.16); --mk-shadow-sm:var(--shadow-sm); --mk-shadow-md:var(--shadow-md); --mk-shadow-lg:var(--shadow-lg); color-scheme:dark; } /* Auto theme respects OS preference — JS applies data-theme="dark" dynamically if user picks "auto" and system is dark. */ .tab-panel{background:var(--bg-page) !important} body{font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif;background:var(--bg);display:flex;height:100vh;overflow:hidden;color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased} /* Global keyboard focus ring — :where() keeps specificity at zero so any component-level :focus style still wins. Mouse clicks don't trigger it. */ :where(button,a,input,select,textarea,[tabindex],[role="tab"]):focus-visible{outline:none;box-shadow:var(--ring-primary, 0 0 0 3px color-mix(in srgb,var(--sky) 45%,transparent))} /* SIDEBAR */ .sidebar{width:240px;background:var(--sidebar);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none} .sidebar::-webkit-scrollbar{width:0;height:0;display:none} .logo{padding:22px 18px;border-bottom:1px solid color-mix(in srgb,var(--sky) 12%,transparent);display:flex;align-items:center;gap:12px} .logo img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px rgba(16,24,40,0.2)} .logo-text h1{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.02em} .logo-text p{font-size:10px;color:var(--sky);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px;font-weight:600} .nav-section{padding:12px 10px;flex:1;overflow-y:auto} .nav-label{font-size:10px;color:color-mix(in srgb,var(--sky) 50%,transparent);padding:0 10px;margin:18px 0 6px;text-transform:uppercase;letter-spacing:0.1em;font-weight:600} .nav-label:first-child{margin-top:0} .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px;color:rgba(255,255,255,0.55);border-radius:8px;margin-bottom:2px;transition:all 0.15s;position:relative;user-select:none;font-weight:500} /* Nav items are real